angular wizard

HTML

<div ng-app="app">
    <div ng-controller="testWizard">
        <wizard>
            <step uib-tooltip="test">
                First Name: <input type="text" ng-model="user.firstName" />
                Last Name: <input type="text" ng-model="user.lastName" />
                <input type="button" value="Next" wizard-next />
            </step>
            <step>
                My name is {{user.firstName}} {{user.lastName}}
                <input type="button" value="Prev" wizard-previous />
                <input type="button" value="Next" wizard-next />
            </step>
            <step>
                Success
            </step>
        </wizard>
    </div>
</div>

JavaScript

angular.module("directives", []);

angular.module("controllers", []).controller("testWizard", function($scope) {
    $scope.user = {
        firstName: 'Bob',
        lastName: 'Builder'
    };
});

angular.module('app', ['controllers','directives']);

angular.module("directives").directive("wizard", function () {
    return {
        restrict: 'E',
        template: '<div>' +
            '<div class="step-content" ng-transclude></div>' +
            '</div>',
        replace: true,
        transclude: true,
        scope: {
            id: "@"
        },
        controller: ['$scope', function ($scope) {
            $scope.currentStep = 0;
            $scope.steps = [];
            $scope.goTo = function (index) {
                angular.forEach($scope.steps, function (step) {
                    step.isCurrentStep = false;
                });
                $scope.currentStep = index;
                $scope.steps[index].isCurrentStep = true;
            }
            this.isCurrentStep = function (step) {
                return $scope.steps.indexOf(step) == $scope.currentStep;
            }
            this.next = function () {
                $scope.goTo($scope.currentStep + 1);
            }
            this.previous = function () {
                $scope.goTo($scope.currentStep - 1);
            }
            this.addStep = function (step) {
                $scope.steps.push(step);
                if ($scope.steps.length == 1) $scope.goTo(0);
            }
        }]
    };
});
angular.module("directives").directive("step", function () {
    return {
        restrict: 'E',
        template: '<div class="step-content"><div ng-show="isCurrentStep" ng-transclude></div></div>',
        replace: true,
        transclude: true,
        scope: {
            title: '@'
        },
        require: '^wizard',
        link: function ($scope, $element, $attrs, wizardCtrl) {
            wizardCtrl.addStep($scope);
            $scope.isCurrentStep =...