title: Checkout Step Navigation
body: <p>i have no idea how to solve this Problem.
  I have 4 Checkout Steps. Each Step has an Form to fullfill.
  If Form is valid, the next Step in Navigation should be activated.</p>
  
  <p>This is the Routing Script</p>
  
  <pre><code>"use strict";
  
  var router = angular.module("router", ["ui.router"]);
  router.config(["$stateProvider", "$urlRouterProvider", "$locationProvider", "$httpProvider",
    function($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
      $locationProvider.html5Mode({
        enabled: true,
        requireBase: true,
        rewriteLinks: true
      });
  
      $stateProvider
        .state("step1", {
          url: "/step1",
          controller: "Step1Controller",
          templateUrl: "app/views/step1-partial.html"
        })
        .state("step2", {
          url: "/step2",
          controller: "Step2Controller",
          templateUrl: "app/views/step2-partial.html"
        })
        .state("step3", {
          url: "/step3",
          controller: "Step3Controller",
          templateUrl: "app/views/step3-partial.html"
        })
        .state("step4", {
          url: "/step4",
          controller: "Step4Controller",
          templateUrl: "app/views/step4-partial.html"
        });
        $urlRouterProvider.otherwise("/step1");
    }
  ]);
  
  router.run(function($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
  });
  </code></pre>
  
  <p>and this is one of the Partials View</p>
  
  <pre><code>&lt;section class="steps"&gt;
    &lt;ul class="clear-list"&gt;
      &lt;li class="active"&gt;&lt;a href="#"&gt;Step1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Step2&lt;/a&gt;&lt;/i&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Step3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Step4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/section&gt;
  
  &lt;form name="registerForm" ng-cloak&gt;
    formfields...
  &lt;/form&gt;
  
  &lt;div class="step-footer"&gt;
    &lt;a href="#" ng-class="{'disable-link' : registerForm.$invalid}" ng-click="processData()" class="step-button right"&gt;Next &gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>can somebody help me out</p>