Fixing issue at https://github.com/angular/angular.js/wiki/Understanding-Scopes - hiding our attributes inside objects so child scopes can access them safely

app/assets/javascripts/darkswarm/controllers/checkout_controller.js.coffee

@@ -1,16 +1,18 @@
 Darkswarm.controller "CheckoutCtrl", ($scope, Order, storage) ->
   window.tmp = $scope
   $scope.order = $scope.Order = Order
+  $scope.accordion = {}
 
   storage.bind $scope, "user", { defaultValue: true}
   $scope.disable = ->
     $scope.user = false
     $scope.details = true
 
-  storage.bind $scope, "details"
-  storage.bind $scope, "billing"
-  storage.bind $scope, "shipping"
-  storage.bind $scope, "payment"
+
+  storage.bind $scope, "accordion.details"
+  storage.bind $scope, "accordion.billing"
+  storage.bind $scope, "accordion.shipping"
+  storage.bind $scope, "accordion.payment"
 
   # Validation utilities to keep things DRY
   $scope.dirtyValid = (name)->
@@ -28,10 +30,21 @@ Darkswarm.controller "CheckoutCtrl", ($scope, Order, storage) ->
   $scope.number = (name)->
     $scope.error(name).number
 
+
+# READ THIS FIRST
+# https://github.com/angular/angular.js/wiki/Understanding-Scopes
+
 Darkswarm.controller "DetailsSubCtrl", ($scope) ->
   $scope.detailsValid = ->
     $scope.detailsFields().every (field)->
       $scope.checkout[field].$valid
+  
+  $scope.$watch ->
+    $scope.detailsValid()
+  , (valid)->
+    if valid
+      $scope.accordion.details = false
+      $scope.accordion.billing = true
     
   $scope.detailsFields = ->
     ["order[email]",

app/views/shop/checkout/_authentication.html.haml

@@ -1,5 +1,5 @@
 %fieldset
-  %accordion-group{heading: "User", "is-open" => "user"}
+  %accordion-group{heading: "User", "is-open" => "accordion.user"}
     .row
       .large-4.columns.text-center{"ng-controller" => "AuthenticationActionsCtrl"}
         %button{"ng-click" => "toggle('/login')"} Login

app/views/shop/checkout/_billing.html.haml

@@ -1,5 +1,5 @@
 %fieldset#billing
-  %accordion-group
+  %accordion-group{"is-open" => "accordion.billing"}
     %accordion-heading
       .row
         .large-6.columns

app/views/shop/checkout/_details.html.haml

@@ -1,5 +1,5 @@
 %fieldset#details
-  %accordion-group{"is-open" => "details"}
+  %accordion-group{"is-open" => "accordion.details"}
     %div{"ng-controller" => "DetailsSubCtrl"}
       {{ detailsValid() }}
       %accordion-heading
@@ -12,6 +12,7 @@
       .row
         .large-6.columns
           = f.email_field :email, required: "", "ng-model" => "order.email",
+            "ng-change" => "next()",
             "ng-class" => "{error: '!emailValid()'}"
           %small.error.medium.input-text{"ng-show" => "emailValid()"}
             {{ emailError() }}
@@ -27,6 +28,7 @@
         .row
           .large-6.columns
             = ba.text_field :firstname, "ng-model" => "order.bill_address.firstname"
+
           .large-6.columns
             = ba.text_field :lastname, "ng-model" => "order.bill_address.lastname"