AngularJS simple wizard

HTML

<div ng-app='myApp'>
    <div ng-controller='myCtrl'>
        <my-wizard>
            <h2>Test wizard</h2> 
            <my-step number='1'>vxcvxcv</my-step>
            <my-step number='2'>xvcvxc</my-step>
            <button ng-click='goTo(0)'>Previous</button>
            <button ng-click='goTo(1)'>Next</button>
        </my-wizard>
    </div>
</div>

CSS

.wizard {
    padding: 10px;
    background-color: orange;
}

.step {
    width: 100px;
    height: 100px;
    background-color: grey;
    border-color: black;
    border-width: 1px;
}

JavaScript

console.clear();

var app = angular.module('myApp', []);

app.controller('myCtrl', ['$scope', function($scope){
}]);

app.directive('myWizard', function(){
    return {
        restrict: 'EA',
        replace: true,
        transclude: true,
        controller: function($scope){
            $scope.steps = [];
            $scope.currentStep = 0;
            
            $scope.goTo = function(n){
                angular.forEach($scope.steps, function(step){
                    step.isCurrentStep = false;
                });
                $scope.currentStep = n >= 0 ? n : 0;
                $scope.steps[$scope.currentStep].isCurrentStep = true;
            }
            
            this.addStep = function(step){
                $scope.steps.push(step);
            };
            
            this.isCurrentStep = function(step){
                return $scope.steps.indexOf(step) == $scope.currentStep;
            };
            
        },
        template: '<div class="wizard" ng-transclude></div>'
    };
});

app.directive('myStep', function(){
    return {
        restrict: 'EA',
        require: '^myWizard',
        replace: true,
        transclude: true,
        scope: {
            number: '='
        },
        link: function($scope, $element, $attrs, myWizardCtrl){
            myWizardCtrl.addStep($scope);
            $scope.isCurrentStep = myWizardCtrl.isCurrentStep($scope);
        },
        template: '<div class="step" ng-show="isCurrentStep"><p>Hello, {{number}}</p><div ng-transclude></div></div>'
    };
});