Tabs directives begin.

src/app/pages/form/wizard/wizard.html

@@ -4,8 +4,8 @@
         <div class="col-md-12">
             <blur-panel title="Form Wizard" class-container="with-scroll">
                 <div class="row">
-                    <div class="mail-navigation-container">
+                    <div class="wizard-navigation-container">
-                        <div ng-repeat="t in tabs" class="mail-navigation {{tab == $index ? 'active' : ''}}" ng-click="selectTab($index)">
+                        <div ng-repeat="t in tabs" class="wizard-navigation {{tab == $index ? 'active' : ''}}" ng-click="selectTab($index)">
                             {{t.name}}
                         </div>
                     </div>

src/app/pages/form/wizard/wizard2.html

@@ -0,0 +1,25 @@
+<div class="wizard">
+    <div class="row">
+        <div class="wizard-navigation-container">
+            <div ng-repeat="t in tabs" class="wizard-navigation {{tab == $index ? 'active' : ''}}" ng-click="selectTab($index)">
+                {{t.name}}
+            </div>
+        </div>
+    </div>
+
+
+    <div class="progress progress-wizard">
+        <div class="progress-bar progress-bar-info active" role="progressbar"
+             aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100" style="{{'width: ' + progress + '%;'}}">
+        </div>
+    </div>
+
+    <div class="steps" ng-transclude></div>
+
+    <nav>
+        <ul class="pager wizard-pager">
+            <li class="previous"><button  ng-disabled="isFirstTab()" ng-click="previousTab()" type="button" class=" btn btn-primary"><span aria-hidden="true">&larr;</span> previous</button></li>
+            <li class="next"> <button ng-disabled="isLastTab()" ng-click="nextTab()" type="button" class="btn btn-primary">next <span aria-hidden="true">&rarr;</span></button></li>
+        </ul>
+    </nav>
+</div>

src/app/pages/form/wizard/wizrdCtrl.js

@@ -51,5 +51,57 @@
     $scope.progress = 0;
   }
 
+  function baWizard() {
+    return {
+      restrict: 'E',
+      transclude: true,
+      scope: {},
+      templateUrl: 'app/pages/form/wizard/wizard2.html',
+      controller: ['$scope', function ($scope) {
+        var vm = this;
+
+        $scope.tabs = [];
+
+        $scope.tab = 0;
+        $scope.progress = 0;
+
+        $scope.$watch('tab', countProgress);
+
+        $scope.selectTab = function (tab) {
+          $scope.tab = tab;
+        };
+
+        $scope.isSelectedTab = function (tab) {
+          return $scope.tab === tab;
+        };
+
+        $scope.isFirstTab = function () {
+          return $scope.tab == 0;
+        };
+
+        $scope.isLastTab = function () {
+          return $scope.tab == $scope.tabs.length - 1 ;
+        };
+
+        $scope.nextTab = function () {
+          $scope.tab++;
+        };
+
+        vm.addTab = function(tab) {
+          
+        };
+
+        $scope.previousTab = function () {
+          $scope.tab--;
+        };
+
+        function countProgress() {
+          $scope.progress = (($scope.tab + 1) / $scope.tabs.length) * 100;
+        }
+
+      }]
+    }
+  }
+
 })();
 

src/sass/app/_form.scss

@@ -498,4 +498,26 @@ label.custom-input-danger {
   .next {
     float: right;
   }
+}
+
+.wizard-navigation-container {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  padding: 15px 0;
+  .wizard-navigation {
+    cursor: pointer;
+    display: table-cell;
+    line-height: 1;
+    text-align: center;
+    font-weight: 100;
+    font-size: 18px;
+    &.active {
+      color: $dribble-color;
+    }
+    transition: transform .5s ease;
+    &:hover{
+      transform: skew(-10deg);
+    }
+  }
 }