From ca695d107a52881f5a945e9a98419895f3edd67c Mon Sep 17 00:00:00 2001
From: Artur <brosig@labtime.ufg.br>
Date: Fri, 11 Aug 2017 09:55:22 -0300
Subject: [PATCH] Creating events for next() and goto()

Those functions are now emitting events `onstepcomplete` and `gotostepcomplete` respectively.

Changed also on the mdStep.tpl from ng-if to ng-show to validate all steps of the form as one.
---
 demo/material-steppers-tpl.js |  4 ++--
 demo/material-steppers.js     | 13 ++++++++-----
 demo/material-steppers.min.js | 13 ++++++++-----
 dist/material-steppers.js     | 13 ++++++++-----
 dist/material-steppers.min.js |  2 +-
 lib/material-steppers.ts      | 10 +++++++---
 lib/mdStep.tpl.html           |  2 +-
 7 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/demo/material-steppers-tpl.js b/demo/material-steppers-tpl.js
index de3cfdf..541e759 100644
--- a/demo/material-steppers-tpl.js
+++ b/demo/material-steppers-tpl.js
@@ -1,2 +1,2 @@
-angular.module("mdSteppers").run(["$templateCache", function($templateCache) {$templateCache.put("mdSteppers/mdStep.tpl.html","<div class=\"md-stepper\" ng-class=\"{ \'md-active\': $ctrl.isActive() }\">\r\n    <md-steppers-header class=\"md-steppers-header md-steppers-vertical\">\r\n        <button class=\"md-stepper-indicator\" ng-class=\"{\r\n                    \'md-active\': $ctrl.stepNumber === $ctrl.$stepper.currentStep,\r\n                    \'md-completed\': $ctrl.$stepper.isCompleted($ctrl.stepNumber),\r\n                    \'md-error\': $ctrl.hasError,\r\n                    \'md-stepper-optional\': $ctrl.optional || $ctrl.hasError\r\n                }\" ng-click=\"$ctrl.$stepper.goto($ctrl.stepNumber)\" ng-disabled=\"$ctrl.$stepper.linear || $ctrl.stepNumber === $ctrl.$stepper.currentStep\">\r\n                <div class=\"md-stepper-indicator-wrapper\">\r\n                    <div class=\"md-stepper-number\" ng-hide=\"$ctrl.hasError\">\r\n                    <span ng-if=\"!$ctrl.$stepper.isCompleted($ctrl.stepNumber)\">{{ ::$ctrl.stepNumber+1 }}</span>\r\n                        <md-icon md-svg-icon=\"steppers-check\" class=\"md-stepper-icon\" ng-if=\"$ctrl.$stepper.isCompleted($ctrl.stepNumber)\"></md-icon>\r\n                    </div>\r\n                    <div class=\"md-stepper-error-indicator\" ng-show=\"$ctrl.hasError\">\r\n                        <md-icon md-svg-icon=\"steppers-warning\"></md-icon>\r\n                    </div>\r\n\r\n                    <div class=\"md-stepper-title\">\r\n                        <span>{{ $ctrl.label }}</span>\r\n                        <small ng-if=\"$ctrl.optional && !$ctrl.hasError\">{{ $ctrl.optional }}</small>\r\n                        <small class=\"md-stepper-error-message\" ng-show=\"$ctrl.hasError\">\r\n                            {{ $ctrl.message }}\r\n                        </small>\r\n                    </div>\r\n                </div>\r\n                </button>\r\n        <div class=\"md-stepper-feedback-message\" ng-show=\"stepper.hasFeedback\">\r\n            {{stepper.feedbackMessage}}\r\n        </div>\r\n    </md-steppers-header>\r\n    <md-steppers-scope layout=\"column\" class=\"md-steppers-scope\" ng-if=\"$ctrl.isActive()\" ng-transclude></md-steppers-scope>\r\n</div>");
-$templateCache.put("mdSteppers/mdStepper.tpl.html","<div flex class=\"md-steppers\" ng-class=\"{ \r\n    \'md-steppers-linear\': stepper.linear, \r\n    \'md-steppers-alternative\': stepper.alternative,\r\n    \'md-steppers-vertical\': stepper.vertical,\r\n    \'md-steppers-mobile-step-text\': stepper.mobileStepText,\r\n    \'md-steppers-has-feedback\': stepper.hasFeedback\r\n    }\">\r\n    <div class=\"md-steppers-header-region\">\r\n        <md-steppers-header class=\"md-steppers-header md-steppers-horizontal md-whiteframe-1dp\">\r\n            <button class=\"md-stepper-indicator\" ng-repeat=\"(stepNumber, $step) in stepper.steps track by $index\" ng-class=\"{\r\n                \'md-active\': stepNumber === stepper.currentStep,\r\n                \'md-completed\': stepper.isCompleted(stepNumber),\r\n                \'md-error\': $step.hasError,\r\n                \'md-stepper-optional\': $step.optional || $step.hasError\r\n            }\" ng-click=\"stepper.goto(stepNumber)\" ng-disabled=\"stepper.linear || stepNumber === stepper.currentStep\">\r\n            <div class=\"md-stepper-indicator-wrapper\">\r\n                <div class=\"md-stepper-number\" ng-hide=\"$step.hasError\">\r\n                    <span ng-if=\"!stepper.isCompleted(stepNumber)\">{{ ::stepNumber+1 }}</span>\r\n                    <md-icon md-svg-icon=\"steppers-check\" class=\"md-stepper-icon\" ng-if=\"stepper.isCompleted(stepNumber)\"></md-icon>\r\n                </div>\r\n\r\n                <div class=\"md-stepper-error-indicator\" ng-show=\"$step.hasError\">\r\n                <md-icon md-svg-icon=\"steppers-warning\"></md-icon>\r\n                </div>\r\n                <div class=\"md-stepper-title\">\r\n                    <span>{{ $step.label }}</span>\r\n                    <small ng-if=\"$step.optional && !$step.hasError\">{{ $step.optional }}</small>\r\n                    <small class=\"md-stepper-error-message\" ng-show=\"$step.hasError\">\r\n                        {{ $step.message }}\r\n                    </small>\r\n                </div>\r\n            </div>\r\n            </button>\r\n           \r\n        </md-steppers-header>\r\n        <md-steppers-mobile-header class=\"md-steppers-mobile-header\">\r\n            <md-toolbar flex=\"none\" class=\"md-whiteframe-1dp\" style=\"background: #f6f6f6 !important; color: #202020 !important;\">\r\n                <div class=\"md-toolbar-tools\">\r\n                    <h3>\r\n                        <span>{{stepper.labelStep}} {{stepper.currentStep+1}} {{stepper.labelOf}} {{stepper.steps.length}}</span>\r\n                    </h3>\r\n                </div>\r\n            </md-toolbar>\r\n        </md-steppers-mobile-header>\r\n        <div class=\"md-stepper-feedback-message\" ng-show=\"stepper.hasFeedback\">\r\n            {{stepper.feedbackMessage}}\r\n        </div>\r\n    </div>\r\n    <md-steppers-content class=\"md-steppers-content\" ng-transclude></md-steppers-content>\r\n    <div class=\"md-steppers-overlay\"></div>\r\n</div>");}]);
\ No newline at end of file
+angular.module("mdSteppers").run(["$templateCache", function($templateCache) {$templateCache.put("mdSteppers/mdStep.tpl.html","<div class=\"md-stepper\" ng-class=\"{ \'md-active\': $ctrl.isActive() }\">\n    <md-steppers-header class=\"md-steppers-header md-steppers-vertical\">\n        <button class=\"md-stepper-indicator\" ng-class=\"{\n                    \'md-active\': $ctrl.stepNumber === $ctrl.$stepper.currentStep,\n                    \'md-completed\': $ctrl.$stepper.isCompleted($ctrl.stepNumber),\n                    \'md-error\': $ctrl.hasError,\n                    \'md-stepper-optional\': $ctrl.optional || $ctrl.hasError\n                }\" ng-click=\"$ctrl.$stepper.goto($ctrl.stepNumber)\" ng-disabled=\"$ctrl.$stepper.linear || $ctrl.stepNumber === $ctrl.$stepper.currentStep\">\n                <div class=\"md-stepper-indicator-wrapper\">\n                    <div class=\"md-stepper-number\" ng-hide=\"$ctrl.hasError\">\n                    <span ng-if=\"!$ctrl.$stepper.isCompleted($ctrl.stepNumber)\">{{ ::$ctrl.stepNumber+1 }}</span>\n                        <md-icon md-svg-icon=\"steppers-check\" class=\"md-stepper-icon\" ng-if=\"$ctrl.$stepper.isCompleted($ctrl.stepNumber)\"></md-icon>\n                    </div>\n                    <div class=\"md-stepper-error-indicator\" ng-show=\"$ctrl.hasError\">\n                        <md-icon md-svg-icon=\"steppers-warning\"></md-icon>\n                    </div>\n\n                    <div class=\"md-stepper-title\">\n                        <span>{{ $ctrl.label }}</span>\n                        <small ng-if=\"$ctrl.optional && !$ctrl.hasError\">{{ $ctrl.optional }}</small>\n                        <small class=\"md-stepper-error-message\" ng-show=\"$ctrl.hasError\">\n                            {{ $ctrl.message }}\n                        </small>\n                    </div>\n                </div>\n                </button>\n        <div class=\"md-stepper-feedback-message\" ng-show=\"stepper.hasFeedback\">\n            {{stepper.feedbackMessage}}\n        </div>\n    </md-steppers-header>\n    <md-steppers-scope layout=\"column\" class=\"md-steppers-scope\" ng-show=\"$ctrl.isActive()\" ng-transclude></md-steppers-scope>\n</div>");
+$templateCache.put("mdSteppers/mdStepper.tpl.html","<div flex class=\"md-steppers\" ng-class=\"{ \n    \'md-steppers-linear\': stepper.linear, \n    \'md-steppers-alternative\': stepper.alternative,\n    \'md-steppers-vertical\': stepper.vertical,\n    \'md-steppers-mobile-step-text\': stepper.mobileStepText,\n    \'md-steppers-has-feedback\': stepper.hasFeedback\n    }\">\n    <div class=\"md-steppers-header-region\">\n        <md-steppers-header class=\"md-steppers-header md-steppers-horizontal md-whiteframe-1dp\">\n            <button class=\"md-stepper-indicator\" ng-repeat=\"(stepNumber, $step) in stepper.steps track by $index\" ng-class=\"{\n                \'md-active\': stepNumber === stepper.currentStep,\n                \'md-completed\': stepper.isCompleted(stepNumber),\n                \'md-error\': $step.hasError,\n                \'md-stepper-optional\': $step.optional || $step.hasError\n            }\" ng-click=\"stepper.goto(stepNumber)\" ng-disabled=\"stepper.linear || stepNumber === stepper.currentStep\">\n            <div class=\"md-stepper-indicator-wrapper\">\n                <div class=\"md-stepper-number\" ng-hide=\"$step.hasError\">\n                    <span ng-if=\"!stepper.isCompleted(stepNumber)\">{{ ::stepNumber+1 }}</span>\n                    <md-icon md-svg-icon=\"steppers-check\" class=\"md-stepper-icon\" ng-if=\"stepper.isCompleted(stepNumber)\"></md-icon>\n                </div>\n\n                <div class=\"md-stepper-error-indicator\" ng-show=\"$step.hasError\">\n                <md-icon md-svg-icon=\"steppers-warning\"></md-icon>\n                </div>\n                <div class=\"md-stepper-title\">\n                    <span>{{ $step.label }}</span>\n                    <small ng-if=\"$step.optional && !$step.hasError\">{{ $step.optional }}</small>\n                    <small class=\"md-stepper-error-message\" ng-show=\"$step.hasError\">\n                        {{ $step.message }}\n                    </small>\n                </div>\n            </div>\n            </button>\n           \n        </md-steppers-header>\n        <md-steppers-mobile-header class=\"md-steppers-mobile-header\">\n            <md-toolbar flex=\"none\" class=\"md-whiteframe-1dp\" style=\"background: #f6f6f6 !important; color: #202020 !important;\">\n                <div class=\"md-toolbar-tools\">\n                    <h3>\n                        <span>{{stepper.labelStep}} {{stepper.currentStep+1}} {{stepper.labelOf}} {{stepper.steps.length}}</span>\n                    </h3>\n                </div>\n            </md-toolbar>\n        </md-steppers-mobile-header>\n        <div class=\"md-stepper-feedback-message\" ng-show=\"stepper.hasFeedback\">\n            {{stepper.feedbackMessage}}\n        </div>\n    </div>\n    <md-steppers-content class=\"md-steppers-content\" ng-transclude></md-steppers-content>\n    <div class=\"md-steppers-overlay\"></div>\n</div>");}]);
\ No newline at end of file
diff --git a/demo/material-steppers.js b/demo/material-steppers.js
index cdcaec1..e6576d8 100644
--- a/demo/material-steppers.js
+++ b/demo/material-steppers.js
@@ -1,8 +1,9 @@
 var StepperCtrl = (function () {
-    function StepperCtrl($mdComponentRegistry, $attrs, $log) {
+    function StepperCtrl($mdComponentRegistry, $attrs, $log, $scope) {
         this.$mdComponentRegistry = $mdComponentRegistry;
         this.$attrs = $attrs;
         this.$log = $log;
+        this.$scope = $scope;
         this.labelStep = 'Step';
         this.labelOf = 'of';
         /* End of bindings */
@@ -51,6 +52,7 @@ var StepperCtrl = (function () {
             this.clearError();
             this.currentStep++;
             this.clearFeedback();
+            this.$scope.$emit('onstepcomplete', this.currentStep);
             return true;
         }
         return false;
@@ -116,6 +118,7 @@ var StepperCtrl = (function () {
         if (stepNumber < this.steps.length) {
             this.currentStep = stepNumber;
             this.clearFeedback();
+            this.$scope.$emit('gotostepcomplete', this.currentStep);
             return true;
         }
         return false;
@@ -138,14 +141,14 @@ var StepperCtrl = (function () {
     StepperCtrl.prototype.isCompleted = function (stepNumber) {
         return this.linear && stepNumber < this.currentStep;
     };
-    ;
     StepperCtrl.prototype.isActiveStep = function (step) {
         return this.steps.indexOf(step) === this.currentStep;
     };
     StepperCtrl.$inject = [
         '$mdComponentRegistry',
         '$attrs',
-        '$log'
+        '$log',
+        '$scope'
     ];
     return StepperCtrl;
 }());
@@ -246,5 +249,5 @@ angular.module('mdSteppers', ['ngMaterial'])
         $templateCache.put("mdSteppers/ic_warning_24px.svg", "<svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n    <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/>\r\n</svg>");
     }]);
 
-angular.module("mdSteppers").run(["$templateCache", function($templateCache) {$templateCache.put("mdSteppers/mdStep.tpl.html","<div class=\"md-stepper\" ng-class=\"{ \'md-active\': $ctrl.isActive() }\">\r\n    <md-steppers-header class=\"md-steppers-header md-steppers-vertical\">\r\n        <button class=\"md-stepper-indicator\" ng-class=\"{\r\n                    \'md-active\': $ctrl.stepNumber === $ctrl.$stepper.currentStep,\r\n                    \'md-completed\': $ctrl.$stepper.isCompleted($ctrl.stepNumber),\r\n                    \'md-error\': $ctrl.hasError,\r\n                    \'md-stepper-optional\': $ctrl.optional || $ctrl.hasError\r\n                }\" ng-click=\"$ctrl.$stepper.goto($ctrl.stepNumber)\" ng-disabled=\"$ctrl.$stepper.linear || $ctrl.stepNumber === $ctrl.$stepper.currentStep\">\r\n                <div class=\"md-stepper-indicator-wrapper\">\r\n                    <div class=\"md-stepper-number\" ng-hide=\"$ctrl.hasError\">\r\n                    <span ng-if=\"!$ctrl.$stepper.isCompleted($ctrl.stepNumber)\">{{ ::$ctrl.stepNumber+1 }}</span>\r\n                        <md-icon md-svg-icon=\"steppers-check\" class=\"md-stepper-icon\" ng-if=\"$ctrl.$stepper.isCompleted($ctrl.stepNumber)\"></md-icon>\r\n                    </div>\r\n                    <div class=\"md-stepper-error-indicator\" ng-show=\"$ctrl.hasError\">\r\n                        <md-icon md-svg-icon=\"steppers-warning\"></md-icon>\r\n                    </div>\r\n\r\n                    <div class=\"md-stepper-title\">\r\n                        <span>{{ $ctrl.label }}</span>\r\n                        <small ng-if=\"$ctrl.optional && !$ctrl.hasError\">{{ $ctrl.optional }}</small>\r\n                        <small class=\"md-stepper-error-message\" ng-show=\"$ctrl.hasError\">\r\n                            {{ $ctrl.message }}\r\n                        </small>\r\n                    </div>\r\n                </div>\r\n                </button>\r\n        <div class=\"md-stepper-feedback-message\" ng-show=\"stepper.hasFeedback\">\r\n            {{stepper.feedbackMessage}}\r\n        </div>\r\n    </md-steppers-header>\r\n    <md-steppers-scope layout=\"column\" class=\"md-steppers-scope\" ng-if=\"$ctrl.isActive()\" ng-transclude></md-steppers-scope>\r\n</div>");
-$templateCache.put("mdSteppers/mdStepper.tpl.html","<div flex class=\"md-steppers\" ng-class=\"{ \r\n    \'md-steppers-linear\': stepper.linear, \r\n    \'md-steppers-alternative\': stepper.alternative,\r\n    \'md-steppers-vertical\': stepper.vertical,\r\n    \'md-steppers-mobile-step-text\': stepper.mobileStepText,\r\n    \'md-steppers-has-feedback\': stepper.hasFeedback\r\n    }\">\r\n    <div class=\"md-steppers-header-region\">\r\n        <md-steppers-header class=\"md-steppers-header md-steppers-horizontal md-whiteframe-1dp\">\r\n            <button class=\"md-stepper-indicator\" ng-repeat=\"(stepNumber, $step) in stepper.steps track by $index\" ng-class=\"{\r\n                \'md-active\': stepNumber === stepper.currentStep,\r\n                \'md-completed\': stepper.isCompleted(stepNumber),\r\n                \'md-error\': $step.hasError,\r\n                \'md-stepper-optional\': $step.optional || $step.hasError\r\n            }\" ng-click=\"stepper.goto(stepNumber)\" ng-disabled=\"stepper.linear || stepNumber === stepper.currentStep\">\r\n            <div class=\"md-stepper-indicator-wrapper\">\r\n                <div class=\"md-stepper-number\" ng-hide=\"$step.hasError\">\r\n                    <span ng-if=\"!stepper.isCompleted(stepNumber)\">{{ ::stepNumber+1 }}</span>\r\n                    <md-icon md-svg-icon=\"steppers-check\" class=\"md-stepper-icon\" ng-if=\"stepper.isCompleted(stepNumber)\"></md-icon>\r\n                </div>\r\n\r\n                <div class=\"md-stepper-error-indicator\" ng-show=\"$step.hasError\">\r\n                <md-icon md-svg-icon=\"steppers-warning\"></md-icon>\r\n                </div>\r\n                <div class=\"md-stepper-title\">\r\n                    <span>{{ $step.label }}</span>\r\n                    <small ng-if=\"$step.optional && !$step.hasError\">{{ $step.optional }}</small>\r\n                    <small class=\"md-stepper-error-message\" ng-show=\"$step.hasError\">\r\n                        {{ $step.message }}\r\n                    </small>\r\n                </div>\r\n            </div>\r\n            </button>\r\n           \r\n        </md-steppers-header>\r\n        <md-steppers-mobile-header class=\"md-steppers-mobile-header\">\r\n            <md-toolbar flex=\"none\" class=\"md-whiteframe-1dp\" style=\"background: #f6f6f6 !important; color: #202020 !important;\">\r\n                <div class=\"md-toolbar-tools\">\r\n                    <h3>\r\n                        <span>{{stepper.labelStep}} {{stepper.currentStep+1}} {{stepper.labelOf}} {{stepper.steps.length}}</span>\r\n                    </h3>\r\n                </div>\r\n            </md-toolbar>\r\n        </md-steppers-mobile-header>\r\n        <div class=\"md-stepper-feedback-message\" ng-show=\"stepper.hasFeedback\">\r\n            {{stepper.feedbackMessage}}\r\n        </div>\r\n    </div>\r\n    <md-steppers-content class=\"md-steppers-content\" ng-transclude></md-steppers-content>\r\n    <div class=\"md-steppers-overlay\"></div>\r\n</div>");}]);
\ No newline at end of file
+angular.module("mdSteppers").run(["$templateCache", function($templateCache) {$templateCache.put("mdSteppers/mdStep.tpl.html","<div class=\"md-stepper\" ng-class=\"{ \'md-active\': $ctrl.isActive() }\">\n    <md-steppers-header class=\"md-steppers-header md-steppers-vertical\">\n        <button class=\"md-stepper-indicator\" ng-class=\"{\n                    \'md-active\': $ctrl.stepNumber === $ctrl.$stepper.currentStep,\n                    \'md-completed\': $ctrl.$stepper.isCompleted($ctrl.stepNumber),\n                    \'md-error\': $ctrl.hasError,\n                    \'md-stepper-optional\': $ctrl.optional || $ctrl.hasError\n                }\" ng-click=\"$ctrl.$stepper.goto($ctrl.stepNumber)\" ng-disabled=\"$ctrl.$stepper.linear || $ctrl.stepNumber === $ctrl.$stepper.currentStep\">\n                <div class=\"md-stepper-indicator-wrapper\">\n                    <div class=\"md-stepper-number\" ng-hide=\"$ctrl.hasError\">\n                    <span ng-if=\"!$ctrl.$stepper.isCompleted($ctrl.stepNumber)\">{{ ::$ctrl.stepNumber+1 }}</span>\n                        <md-icon md-svg-icon=\"steppers-check\" class=\"md-stepper-icon\" ng-if=\"$ctrl.$stepper.isCompleted($ctrl.stepNumber)\"></md-icon>\n                    </div>\n                    <div class=\"md-stepper-error-indicator\" ng-show=\"$ctrl.hasError\">\n                        <md-icon md-svg-icon=\"steppers-warning\"></md-icon>\n                    </div>\n\n                    <div class=\"md-stepper-title\">\n                        <span>{{ $ctrl.label }}</span>\n                        <small ng-if=\"$ctrl.optional && !$ctrl.hasError\">{{ $ctrl.optional }}</small>\n                        <small class=\"md-stepper-error-message\" ng-show=\"$ctrl.hasError\">\n                            {{ $ctrl.message }}\n                        </small>\n                    </div>\n                </div>\n                </button>\n        <div class=\"md-stepper-feedback-message\" ng-show=\"stepper.hasFeedback\">\n            {{stepper.feedbackMessage}}\n        </div>\n    </md-steppers-header>\n    <md-steppers-scope layout=\"column\" class=\"md-steppers-scope\" ng-show=\"$ctrl.isActive()\" ng-transclude></md-steppers-scope>\n</div>");
+$templateCache.put("mdSteppers/mdStepper.tpl.html","<div flex class=\"md-steppers\" ng-class=\"{ \n    \'md-steppers-linear\': stepper.linear, \n    \'md-steppers-alternative\': stepper.alternative,\n    \'md-steppers-vertical\': stepper.vertical,\n    \'md-steppers-mobile-step-text\': stepper.mobileStepText,\n    \'md-steppers-has-feedback\': stepper.hasFeedback\n    }\">\n    <div class=\"md-steppers-header-region\">\n        <md-steppers-header class=\"md-steppers-header md-steppers-horizontal md-whiteframe-1dp\">\n            <button class=\"md-stepper-indicator\" ng-repeat=\"(stepNumber, $step) in stepper.steps track by $index\" ng-class=\"{\n                \'md-active\': stepNumber === stepper.currentStep,\n                \'md-completed\': stepper.isCompleted(stepNumber),\n                \'md-error\': $step.hasError,\n                \'md-stepper-optional\': $step.optional || $step.hasError\n            }\" ng-click=\"stepper.goto(stepNumber)\" ng-disabled=\"stepper.linear || stepNumber === stepper.currentStep\">\n            <div class=\"md-stepper-indicator-wrapper\">\n                <div class=\"md-stepper-number\" ng-hide=\"$step.hasError\">\n                    <span ng-if=\"!stepper.isCompleted(stepNumber)\">{{ ::stepNumber+1 }}</span>\n                    <md-icon md-svg-icon=\"steppers-check\" class=\"md-stepper-icon\" ng-if=\"stepper.isCompleted(stepNumber)\"></md-icon>\n                </div>\n\n                <div class=\"md-stepper-error-indicator\" ng-show=\"$step.hasError\">\n                <md-icon md-svg-icon=\"steppers-warning\"></md-icon>\n                </div>\n                <div class=\"md-stepper-title\">\n                    <span>{{ $step.label }}</span>\n                    <small ng-if=\"$step.optional && !$step.hasError\">{{ $step.optional }}</small>\n                    <small class=\"md-stepper-error-message\" ng-show=\"$step.hasError\">\n                        {{ $step.message }}\n                    </small>\n                </div>\n            </div>\n            </button>\n           \n        </md-steppers-header>\n        <md-steppers-mobile-header class=\"md-steppers-mobile-header\">\n            <md-toolbar flex=\"none\" class=\"md-whiteframe-1dp\" style=\"background: #f6f6f6 !important; color: #202020 !important;\">\n                <div class=\"md-toolbar-tools\">\n                    <h3>\n                        <span>{{stepper.labelStep}} {{stepper.currentStep+1}} {{stepper.labelOf}} {{stepper.steps.length}}</span>\n                    </h3>\n                </div>\n            </md-toolbar>\n        </md-steppers-mobile-header>\n        <div class=\"md-stepper-feedback-message\" ng-show=\"stepper.hasFeedback\">\n            {{stepper.feedbackMessage}}\n        </div>\n    </div>\n    <md-steppers-content class=\"md-steppers-content\" ng-transclude></md-steppers-content>\n    <div class=\"md-steppers-overlay\"></div>\n</div>");}]);
\ No newline at end of file
diff --git a/demo/material-steppers.min.js b/demo/material-steppers.min.js
index cdcaec1..e6576d8 100644
--- a/demo/material-steppers.min.js
+++ b/demo/material-steppers.min.js
@@ -1,8 +1,9 @@
 var StepperCtrl = (function () {
-    function StepperCtrl($mdComponentRegistry, $attrs, $log) {
+    function StepperCtrl($mdComponentRegistry, $attrs, $log, $scope) {
         this.$mdComponentRegistry = $mdComponentRegistry;
         this.$attrs = $attrs;
         this.$log = $log;
+        this.$scope = $scope;
         this.labelStep = 'Step';
         this.labelOf = 'of';
         /* End of bindings */
@@ -51,6 +52,7 @@ var StepperCtrl = (function () {
             this.clearError();
             this.currentStep++;
             this.clearFeedback();
+            this.$scope.$emit('onstepcomplete', this.currentStep);
             return true;
         }
         return false;
@@ -116,6 +118,7 @@ var StepperCtrl = (function () {
         if (stepNumber < this.steps.length) {
             this.currentStep = stepNumber;
             this.clearFeedback();
+            this.$scope.$emit('gotostepcomplete', this.currentStep);
             return true;
         }
         return false;
@@ -138,14 +141,14 @@ var StepperCtrl = (function () {
     StepperCtrl.prototype.isCompleted = function (stepNumber) {
         return this.linear && stepNumber < this.currentStep;
     };
-    ;
     StepperCtrl.prototype.isActiveStep = function (step) {
         return this.steps.indexOf(step) === this.currentStep;
     };
     StepperCtrl.$inject = [
         '$mdComponentRegistry',
         '$attrs',
-        '$log'
+        '$log',
+        '$scope'
     ];
     return StepperCtrl;
 }());
@@ -246,5 +249,5 @@ angular.module('mdSteppers', ['ngMaterial'])
         $templateCache.put("mdSteppers/ic_warning_24px.svg", "<svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n    <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/>\r\n</svg>");
     }]);
 
-angular.module("mdSteppers").run(["$templateCache", function($templateCache) {$templateCache.put("mdSteppers/mdStep.tpl.html","<div class=\"md-stepper\" ng-class=\"{ \'md-active\': $ctrl.isActive() }\">\r\n    <md-steppers-header class=\"md-steppers-header md-steppers-vertical\">\r\n        <button class=\"md-stepper-indicator\" ng-class=\"{\r\n                    \'md-active\': $ctrl.stepNumber === $ctrl.$stepper.currentStep,\r\n                    \'md-completed\': $ctrl.$stepper.isCompleted($ctrl.stepNumber),\r\n                    \'md-error\': $ctrl.hasError,\r\n                    \'md-stepper-optional\': $ctrl.optional || $ctrl.hasError\r\n                }\" ng-click=\"$ctrl.$stepper.goto($ctrl.stepNumber)\" ng-disabled=\"$ctrl.$stepper.linear || $ctrl.stepNumber === $ctrl.$stepper.currentStep\">\r\n                <div class=\"md-stepper-indicator-wrapper\">\r\n                    <div class=\"md-stepper-number\" ng-hide=\"$ctrl.hasError\">\r\n                    <span ng-if=\"!$ctrl.$stepper.isCompleted($ctrl.stepNumber)\">{{ ::$ctrl.stepNumber+1 }}</span>\r\n                        <md-icon md-svg-icon=\"steppers-check\" class=\"md-stepper-icon\" ng-if=\"$ctrl.$stepper.isCompleted($ctrl.stepNumber)\"></md-icon>\r\n                    </div>\r\n                    <div class=\"md-stepper-error-indicator\" ng-show=\"$ctrl.hasError\">\r\n                        <md-icon md-svg-icon=\"steppers-warning\"></md-icon>\r\n                    </div>\r\n\r\n                    <div class=\"md-stepper-title\">\r\n                        <span>{{ $ctrl.label }}</span>\r\n                        <small ng-if=\"$ctrl.optional && !$ctrl.hasError\">{{ $ctrl.optional }}</small>\r\n                        <small class=\"md-stepper-error-message\" ng-show=\"$ctrl.hasError\">\r\n                            {{ $ctrl.message }}\r\n                        </small>\r\n                    </div>\r\n                </div>\r\n                </button>\r\n        <div class=\"md-stepper-feedback-message\" ng-show=\"stepper.hasFeedback\">\r\n            {{stepper.feedbackMessage}}\r\n        </div>\r\n    </md-steppers-header>\r\n    <md-steppers-scope layout=\"column\" class=\"md-steppers-scope\" ng-if=\"$ctrl.isActive()\" ng-transclude></md-steppers-scope>\r\n</div>");
-$templateCache.put("mdSteppers/mdStepper.tpl.html","<div flex class=\"md-steppers\" ng-class=\"{ \r\n    \'md-steppers-linear\': stepper.linear, \r\n    \'md-steppers-alternative\': stepper.alternative,\r\n    \'md-steppers-vertical\': stepper.vertical,\r\n    \'md-steppers-mobile-step-text\': stepper.mobileStepText,\r\n    \'md-steppers-has-feedback\': stepper.hasFeedback\r\n    }\">\r\n    <div class=\"md-steppers-header-region\">\r\n        <md-steppers-header class=\"md-steppers-header md-steppers-horizontal md-whiteframe-1dp\">\r\n            <button class=\"md-stepper-indicator\" ng-repeat=\"(stepNumber, $step) in stepper.steps track by $index\" ng-class=\"{\r\n                \'md-active\': stepNumber === stepper.currentStep,\r\n                \'md-completed\': stepper.isCompleted(stepNumber),\r\n                \'md-error\': $step.hasError,\r\n                \'md-stepper-optional\': $step.optional || $step.hasError\r\n            }\" ng-click=\"stepper.goto(stepNumber)\" ng-disabled=\"stepper.linear || stepNumber === stepper.currentStep\">\r\n            <div class=\"md-stepper-indicator-wrapper\">\r\n                <div class=\"md-stepper-number\" ng-hide=\"$step.hasError\">\r\n                    <span ng-if=\"!stepper.isCompleted(stepNumber)\">{{ ::stepNumber+1 }}</span>\r\n                    <md-icon md-svg-icon=\"steppers-check\" class=\"md-stepper-icon\" ng-if=\"stepper.isCompleted(stepNumber)\"></md-icon>\r\n                </div>\r\n\r\n                <div class=\"md-stepper-error-indicator\" ng-show=\"$step.hasError\">\r\n                <md-icon md-svg-icon=\"steppers-warning\"></md-icon>\r\n                </div>\r\n                <div class=\"md-stepper-title\">\r\n                    <span>{{ $step.label }}</span>\r\n                    <small ng-if=\"$step.optional && !$step.hasError\">{{ $step.optional }}</small>\r\n                    <small class=\"md-stepper-error-message\" ng-show=\"$step.hasError\">\r\n                        {{ $step.message }}\r\n                    </small>\r\n                </div>\r\n            </div>\r\n            </button>\r\n           \r\n        </md-steppers-header>\r\n        <md-steppers-mobile-header class=\"md-steppers-mobile-header\">\r\n            <md-toolbar flex=\"none\" class=\"md-whiteframe-1dp\" style=\"background: #f6f6f6 !important; color: #202020 !important;\">\r\n                <div class=\"md-toolbar-tools\">\r\n                    <h3>\r\n                        <span>{{stepper.labelStep}} {{stepper.currentStep+1}} {{stepper.labelOf}} {{stepper.steps.length}}</span>\r\n                    </h3>\r\n                </div>\r\n            </md-toolbar>\r\n        </md-steppers-mobile-header>\r\n        <div class=\"md-stepper-feedback-message\" ng-show=\"stepper.hasFeedback\">\r\n            {{stepper.feedbackMessage}}\r\n        </div>\r\n    </div>\r\n    <md-steppers-content class=\"md-steppers-content\" ng-transclude></md-steppers-content>\r\n    <div class=\"md-steppers-overlay\"></div>\r\n</div>");}]);
\ No newline at end of file
+angular.module("mdSteppers").run(["$templateCache", function($templateCache) {$templateCache.put("mdSteppers/mdStep.tpl.html","<div class=\"md-stepper\" ng-class=\"{ \'md-active\': $ctrl.isActive() }\">\n    <md-steppers-header class=\"md-steppers-header md-steppers-vertical\">\n        <button class=\"md-stepper-indicator\" ng-class=\"{\n                    \'md-active\': $ctrl.stepNumber === $ctrl.$stepper.currentStep,\n                    \'md-completed\': $ctrl.$stepper.isCompleted($ctrl.stepNumber),\n                    \'md-error\': $ctrl.hasError,\n                    \'md-stepper-optional\': $ctrl.optional || $ctrl.hasError\n                }\" ng-click=\"$ctrl.$stepper.goto($ctrl.stepNumber)\" ng-disabled=\"$ctrl.$stepper.linear || $ctrl.stepNumber === $ctrl.$stepper.currentStep\">\n                <div class=\"md-stepper-indicator-wrapper\">\n                    <div class=\"md-stepper-number\" ng-hide=\"$ctrl.hasError\">\n                    <span ng-if=\"!$ctrl.$stepper.isCompleted($ctrl.stepNumber)\">{{ ::$ctrl.stepNumber+1 }}</span>\n                        <md-icon md-svg-icon=\"steppers-check\" class=\"md-stepper-icon\" ng-if=\"$ctrl.$stepper.isCompleted($ctrl.stepNumber)\"></md-icon>\n                    </div>\n                    <div class=\"md-stepper-error-indicator\" ng-show=\"$ctrl.hasError\">\n                        <md-icon md-svg-icon=\"steppers-warning\"></md-icon>\n                    </div>\n\n                    <div class=\"md-stepper-title\">\n                        <span>{{ $ctrl.label }}</span>\n                        <small ng-if=\"$ctrl.optional && !$ctrl.hasError\">{{ $ctrl.optional }}</small>\n                        <small class=\"md-stepper-error-message\" ng-show=\"$ctrl.hasError\">\n                            {{ $ctrl.message }}\n                        </small>\n                    </div>\n                </div>\n                </button>\n        <div class=\"md-stepper-feedback-message\" ng-show=\"stepper.hasFeedback\">\n            {{stepper.feedbackMessage}}\n        </div>\n    </md-steppers-header>\n    <md-steppers-scope layout=\"column\" class=\"md-steppers-scope\" ng-show=\"$ctrl.isActive()\" ng-transclude></md-steppers-scope>\n</div>");
+$templateCache.put("mdSteppers/mdStepper.tpl.html","<div flex class=\"md-steppers\" ng-class=\"{ \n    \'md-steppers-linear\': stepper.linear, \n    \'md-steppers-alternative\': stepper.alternative,\n    \'md-steppers-vertical\': stepper.vertical,\n    \'md-steppers-mobile-step-text\': stepper.mobileStepText,\n    \'md-steppers-has-feedback\': stepper.hasFeedback\n    }\">\n    <div class=\"md-steppers-header-region\">\n        <md-steppers-header class=\"md-steppers-header md-steppers-horizontal md-whiteframe-1dp\">\n            <button class=\"md-stepper-indicator\" ng-repeat=\"(stepNumber, $step) in stepper.steps track by $index\" ng-class=\"{\n                \'md-active\': stepNumber === stepper.currentStep,\n                \'md-completed\': stepper.isCompleted(stepNumber),\n                \'md-error\': $step.hasError,\n                \'md-stepper-optional\': $step.optional || $step.hasError\n            }\" ng-click=\"stepper.goto(stepNumber)\" ng-disabled=\"stepper.linear || stepNumber === stepper.currentStep\">\n            <div class=\"md-stepper-indicator-wrapper\">\n                <div class=\"md-stepper-number\" ng-hide=\"$step.hasError\">\n                    <span ng-if=\"!stepper.isCompleted(stepNumber)\">{{ ::stepNumber+1 }}</span>\n                    <md-icon md-svg-icon=\"steppers-check\" class=\"md-stepper-icon\" ng-if=\"stepper.isCompleted(stepNumber)\"></md-icon>\n                </div>\n\n                <div class=\"md-stepper-error-indicator\" ng-show=\"$step.hasError\">\n                <md-icon md-svg-icon=\"steppers-warning\"></md-icon>\n                </div>\n                <div class=\"md-stepper-title\">\n                    <span>{{ $step.label }}</span>\n                    <small ng-if=\"$step.optional && !$step.hasError\">{{ $step.optional }}</small>\n                    <small class=\"md-stepper-error-message\" ng-show=\"$step.hasError\">\n                        {{ $step.message }}\n                    </small>\n                </div>\n            </div>\n            </button>\n           \n        </md-steppers-header>\n        <md-steppers-mobile-header class=\"md-steppers-mobile-header\">\n            <md-toolbar flex=\"none\" class=\"md-whiteframe-1dp\" style=\"background: #f6f6f6 !important; color: #202020 !important;\">\n                <div class=\"md-toolbar-tools\">\n                    <h3>\n                        <span>{{stepper.labelStep}} {{stepper.currentStep+1}} {{stepper.labelOf}} {{stepper.steps.length}}</span>\n                    </h3>\n                </div>\n            </md-toolbar>\n        </md-steppers-mobile-header>\n        <div class=\"md-stepper-feedback-message\" ng-show=\"stepper.hasFeedback\">\n            {{stepper.feedbackMessage}}\n        </div>\n    </div>\n    <md-steppers-content class=\"md-steppers-content\" ng-transclude></md-steppers-content>\n    <div class=\"md-steppers-overlay\"></div>\n</div>");}]);
\ No newline at end of file
diff --git a/dist/material-steppers.js b/dist/material-steppers.js
index cdcaec1..e6576d8 100644
--- a/dist/material-steppers.js
+++ b/dist/material-steppers.js
@@ -1,8 +1,9 @@
 var StepperCtrl = (function () {
-    function StepperCtrl($mdComponentRegistry, $attrs, $log) {
+    function StepperCtrl($mdComponentRegistry, $attrs, $log, $scope) {
         this.$mdComponentRegistry = $mdComponentRegistry;
         this.$attrs = $attrs;
         this.$log = $log;
+        this.$scope = $scope;
         this.labelStep = 'Step';
         this.labelOf = 'of';
         /* End of bindings */
@@ -51,6 +52,7 @@ var StepperCtrl = (function () {
             this.clearError();
             this.currentStep++;
             this.clearFeedback();
+            this.$scope.$emit('onstepcomplete', this.currentStep);
             return true;
         }
         return false;
@@ -116,6 +118,7 @@ var StepperCtrl = (function () {
         if (stepNumber < this.steps.length) {
             this.currentStep = stepNumber;
             this.clearFeedback();
+            this.$scope.$emit('gotostepcomplete', this.currentStep);
             return true;
         }
         return false;
@@ -138,14 +141,14 @@ var StepperCtrl = (function () {
     StepperCtrl.prototype.isCompleted = function (stepNumber) {
         return this.linear && stepNumber < this.currentStep;
     };
-    ;
     StepperCtrl.prototype.isActiveStep = function (step) {
         return this.steps.indexOf(step) === this.currentStep;
     };
     StepperCtrl.$inject = [
         '$mdComponentRegistry',
         '$attrs',
-        '$log'
+        '$log',
+        '$scope'
     ];
     return StepperCtrl;
 }());
@@ -246,5 +249,5 @@ angular.module('mdSteppers', ['ngMaterial'])
         $templateCache.put("mdSteppers/ic_warning_24px.svg", "<svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n    <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/>\r\n</svg>");
     }]);
 
-angular.module("mdSteppers").run(["$templateCache", function($templateCache) {$templateCache.put("mdSteppers/mdStep.tpl.html","<div class=\"md-stepper\" ng-class=\"{ \'md-active\': $ctrl.isActive() }\">\r\n    <md-steppers-header class=\"md-steppers-header md-steppers-vertical\">\r\n        <button class=\"md-stepper-indicator\" ng-class=\"{\r\n                    \'md-active\': $ctrl.stepNumber === $ctrl.$stepper.currentStep,\r\n                    \'md-completed\': $ctrl.$stepper.isCompleted($ctrl.stepNumber),\r\n                    \'md-error\': $ctrl.hasError,\r\n                    \'md-stepper-optional\': $ctrl.optional || $ctrl.hasError\r\n                }\" ng-click=\"$ctrl.$stepper.goto($ctrl.stepNumber)\" ng-disabled=\"$ctrl.$stepper.linear || $ctrl.stepNumber === $ctrl.$stepper.currentStep\">\r\n                <div class=\"md-stepper-indicator-wrapper\">\r\n                    <div class=\"md-stepper-number\" ng-hide=\"$ctrl.hasError\">\r\n                    <span ng-if=\"!$ctrl.$stepper.isCompleted($ctrl.stepNumber)\">{{ ::$ctrl.stepNumber+1 }}</span>\r\n                        <md-icon md-svg-icon=\"steppers-check\" class=\"md-stepper-icon\" ng-if=\"$ctrl.$stepper.isCompleted($ctrl.stepNumber)\"></md-icon>\r\n                    </div>\r\n                    <div class=\"md-stepper-error-indicator\" ng-show=\"$ctrl.hasError\">\r\n                        <md-icon md-svg-icon=\"steppers-warning\"></md-icon>\r\n                    </div>\r\n\r\n                    <div class=\"md-stepper-title\">\r\n                        <span>{{ $ctrl.label }}</span>\r\n                        <small ng-if=\"$ctrl.optional && !$ctrl.hasError\">{{ $ctrl.optional }}</small>\r\n                        <small class=\"md-stepper-error-message\" ng-show=\"$ctrl.hasError\">\r\n                            {{ $ctrl.message }}\r\n                        </small>\r\n                    </div>\r\n                </div>\r\n                </button>\r\n        <div class=\"md-stepper-feedback-message\" ng-show=\"stepper.hasFeedback\">\r\n            {{stepper.feedbackMessage}}\r\n        </div>\r\n    </md-steppers-header>\r\n    <md-steppers-scope layout=\"column\" class=\"md-steppers-scope\" ng-if=\"$ctrl.isActive()\" ng-transclude></md-steppers-scope>\r\n</div>");
-$templateCache.put("mdSteppers/mdStepper.tpl.html","<div flex class=\"md-steppers\" ng-class=\"{ \r\n    \'md-steppers-linear\': stepper.linear, \r\n    \'md-steppers-alternative\': stepper.alternative,\r\n    \'md-steppers-vertical\': stepper.vertical,\r\n    \'md-steppers-mobile-step-text\': stepper.mobileStepText,\r\n    \'md-steppers-has-feedback\': stepper.hasFeedback\r\n    }\">\r\n    <div class=\"md-steppers-header-region\">\r\n        <md-steppers-header class=\"md-steppers-header md-steppers-horizontal md-whiteframe-1dp\">\r\n            <button class=\"md-stepper-indicator\" ng-repeat=\"(stepNumber, $step) in stepper.steps track by $index\" ng-class=\"{\r\n                \'md-active\': stepNumber === stepper.currentStep,\r\n                \'md-completed\': stepper.isCompleted(stepNumber),\r\n                \'md-error\': $step.hasError,\r\n                \'md-stepper-optional\': $step.optional || $step.hasError\r\n            }\" ng-click=\"stepper.goto(stepNumber)\" ng-disabled=\"stepper.linear || stepNumber === stepper.currentStep\">\r\n            <div class=\"md-stepper-indicator-wrapper\">\r\n                <div class=\"md-stepper-number\" ng-hide=\"$step.hasError\">\r\n                    <span ng-if=\"!stepper.isCompleted(stepNumber)\">{{ ::stepNumber+1 }}</span>\r\n                    <md-icon md-svg-icon=\"steppers-check\" class=\"md-stepper-icon\" ng-if=\"stepper.isCompleted(stepNumber)\"></md-icon>\r\n                </div>\r\n\r\n                <div class=\"md-stepper-error-indicator\" ng-show=\"$step.hasError\">\r\n                <md-icon md-svg-icon=\"steppers-warning\"></md-icon>\r\n                </div>\r\n                <div class=\"md-stepper-title\">\r\n                    <span>{{ $step.label }}</span>\r\n                    <small ng-if=\"$step.optional && !$step.hasError\">{{ $step.optional }}</small>\r\n                    <small class=\"md-stepper-error-message\" ng-show=\"$step.hasError\">\r\n                        {{ $step.message }}\r\n                    </small>\r\n                </div>\r\n            </div>\r\n            </button>\r\n           \r\n        </md-steppers-header>\r\n        <md-steppers-mobile-header class=\"md-steppers-mobile-header\">\r\n            <md-toolbar flex=\"none\" class=\"md-whiteframe-1dp\" style=\"background: #f6f6f6 !important; color: #202020 !important;\">\r\n                <div class=\"md-toolbar-tools\">\r\n                    <h3>\r\n                        <span>{{stepper.labelStep}} {{stepper.currentStep+1}} {{stepper.labelOf}} {{stepper.steps.length}}</span>\r\n                    </h3>\r\n                </div>\r\n            </md-toolbar>\r\n        </md-steppers-mobile-header>\r\n        <div class=\"md-stepper-feedback-message\" ng-show=\"stepper.hasFeedback\">\r\n            {{stepper.feedbackMessage}}\r\n        </div>\r\n    </div>\r\n    <md-steppers-content class=\"md-steppers-content\" ng-transclude></md-steppers-content>\r\n    <div class=\"md-steppers-overlay\"></div>\r\n</div>");}]);
\ No newline at end of file
+angular.module("mdSteppers").run(["$templateCache", function($templateCache) {$templateCache.put("mdSteppers/mdStep.tpl.html","<div class=\"md-stepper\" ng-class=\"{ \'md-active\': $ctrl.isActive() }\">\n    <md-steppers-header class=\"md-steppers-header md-steppers-vertical\">\n        <button class=\"md-stepper-indicator\" ng-class=\"{\n                    \'md-active\': $ctrl.stepNumber === $ctrl.$stepper.currentStep,\n                    \'md-completed\': $ctrl.$stepper.isCompleted($ctrl.stepNumber),\n                    \'md-error\': $ctrl.hasError,\n                    \'md-stepper-optional\': $ctrl.optional || $ctrl.hasError\n                }\" ng-click=\"$ctrl.$stepper.goto($ctrl.stepNumber)\" ng-disabled=\"$ctrl.$stepper.linear || $ctrl.stepNumber === $ctrl.$stepper.currentStep\">\n                <div class=\"md-stepper-indicator-wrapper\">\n                    <div class=\"md-stepper-number\" ng-hide=\"$ctrl.hasError\">\n                    <span ng-if=\"!$ctrl.$stepper.isCompleted($ctrl.stepNumber)\">{{ ::$ctrl.stepNumber+1 }}</span>\n                        <md-icon md-svg-icon=\"steppers-check\" class=\"md-stepper-icon\" ng-if=\"$ctrl.$stepper.isCompleted($ctrl.stepNumber)\"></md-icon>\n                    </div>\n                    <div class=\"md-stepper-error-indicator\" ng-show=\"$ctrl.hasError\">\n                        <md-icon md-svg-icon=\"steppers-warning\"></md-icon>\n                    </div>\n\n                    <div class=\"md-stepper-title\">\n                        <span>{{ $ctrl.label }}</span>\n                        <small ng-if=\"$ctrl.optional && !$ctrl.hasError\">{{ $ctrl.optional }}</small>\n                        <small class=\"md-stepper-error-message\" ng-show=\"$ctrl.hasError\">\n                            {{ $ctrl.message }}\n                        </small>\n                    </div>\n                </div>\n                </button>\n        <div class=\"md-stepper-feedback-message\" ng-show=\"stepper.hasFeedback\">\n            {{stepper.feedbackMessage}}\n        </div>\n    </md-steppers-header>\n    <md-steppers-scope layout=\"column\" class=\"md-steppers-scope\" ng-show=\"$ctrl.isActive()\" ng-transclude></md-steppers-scope>\n</div>");
+$templateCache.put("mdSteppers/mdStepper.tpl.html","<div flex class=\"md-steppers\" ng-class=\"{ \n    \'md-steppers-linear\': stepper.linear, \n    \'md-steppers-alternative\': stepper.alternative,\n    \'md-steppers-vertical\': stepper.vertical,\n    \'md-steppers-mobile-step-text\': stepper.mobileStepText,\n    \'md-steppers-has-feedback\': stepper.hasFeedback\n    }\">\n    <div class=\"md-steppers-header-region\">\n        <md-steppers-header class=\"md-steppers-header md-steppers-horizontal md-whiteframe-1dp\">\n            <button class=\"md-stepper-indicator\" ng-repeat=\"(stepNumber, $step) in stepper.steps track by $index\" ng-class=\"{\n                \'md-active\': stepNumber === stepper.currentStep,\n                \'md-completed\': stepper.isCompleted(stepNumber),\n                \'md-error\': $step.hasError,\n                \'md-stepper-optional\': $step.optional || $step.hasError\n            }\" ng-click=\"stepper.goto(stepNumber)\" ng-disabled=\"stepper.linear || stepNumber === stepper.currentStep\">\n            <div class=\"md-stepper-indicator-wrapper\">\n                <div class=\"md-stepper-number\" ng-hide=\"$step.hasError\">\n                    <span ng-if=\"!stepper.isCompleted(stepNumber)\">{{ ::stepNumber+1 }}</span>\n                    <md-icon md-svg-icon=\"steppers-check\" class=\"md-stepper-icon\" ng-if=\"stepper.isCompleted(stepNumber)\"></md-icon>\n                </div>\n\n                <div class=\"md-stepper-error-indicator\" ng-show=\"$step.hasError\">\n                <md-icon md-svg-icon=\"steppers-warning\"></md-icon>\n                </div>\n                <div class=\"md-stepper-title\">\n                    <span>{{ $step.label }}</span>\n                    <small ng-if=\"$step.optional && !$step.hasError\">{{ $step.optional }}</small>\n                    <small class=\"md-stepper-error-message\" ng-show=\"$step.hasError\">\n                        {{ $step.message }}\n                    </small>\n                </div>\n            </div>\n            </button>\n           \n        </md-steppers-header>\n        <md-steppers-mobile-header class=\"md-steppers-mobile-header\">\n            <md-toolbar flex=\"none\" class=\"md-whiteframe-1dp\" style=\"background: #f6f6f6 !important; color: #202020 !important;\">\n                <div class=\"md-toolbar-tools\">\n                    <h3>\n                        <span>{{stepper.labelStep}} {{stepper.currentStep+1}} {{stepper.labelOf}} {{stepper.steps.length}}</span>\n                    </h3>\n                </div>\n            </md-toolbar>\n        </md-steppers-mobile-header>\n        <div class=\"md-stepper-feedback-message\" ng-show=\"stepper.hasFeedback\">\n            {{stepper.feedbackMessage}}\n        </div>\n    </div>\n    <md-steppers-content class=\"md-steppers-content\" ng-transclude></md-steppers-content>\n    <div class=\"md-steppers-overlay\"></div>\n</div>");}]);
\ No newline at end of file
diff --git a/dist/material-steppers.min.js b/dist/material-steppers.min.js
index 1fcccf8..3e620b3 100644
--- a/dist/material-steppers.min.js
+++ b/dist/material-steppers.min.js
@@ -1 +1 @@
-var StepperCtrl=function(){function e(e,t,r){this.$mdComponentRegistry=e,this.$attrs=t,this.$log=r,this.labelStep="Step",this.labelOf="of",this.steps=[],this.currentStep=0}return e.prototype.$onInit=function(){""===this.$attrs.mdMobileStepText&&(this.mobileStepText=!0),""===this.$attrs.mdLinear&&(this.linear=!0),""===this.$attrs.mdAlternative&&(this.alternative=!0)},e.prototype.$postLink=function(){this.$attrs.id||this.$log.warn("You must set an id attribute to your stepper"),this.registeredStepper=this.$mdComponentRegistry.register(this,this.$attrs.id)},e.prototype.$onDestroy=function(){this.registeredStepper&&this.registeredStepper()},e.prototype.$addStep=function(e){return this.steps.push(e)-1},e.prototype.next=function(){return this.currentStep<this.steps.length&&(this.clearError(),this.currentStep++,this.clearFeedback(),!0)},e.prototype.back=function(){return this.currentStep>0&&(this.clearError(),this.currentStep--,this.clearFeedback(),!0)},e.prototype.skip=function(){var e=this.steps[this.currentStep];return!!e.optional&&(this.currentStep++,this.clearFeedback(),!0)},e.prototype.error=function(e){var t=this.steps[this.currentStep];t.hasError=!0,t.message=e,this.clearFeedback()},e.prototype.clearError=function(){var e=this.steps[this.currentStep];e.hasError=!1},e.prototype["goto"]=function(e){return e<this.steps.length&&(this.currentStep=e,this.clearFeedback(),!0)},e.prototype.showFeedback=function(e){this.hasFeedback=!0,this.feedbackMessage=e},e.prototype.clearFeedback=function(){this.hasFeedback=!1},e.prototype.isCompleted=function(e){return this.linear&&e<this.currentStep},e.prototype.isActiveStep=function(e){return this.steps.indexOf(e)===this.currentStep},e.$inject=["$mdComponentRegistry","$attrs","$log"],e}(),StepperServiceFactory=["$mdComponentRegistry",function(e){return function(t){var r=e.get(t);return r||e.notFoundError(t),r}}],StepCtrl=function(){function e(e,t,r){this.$element=e,this.$compile=t,this.$scope=r}return e.prototype.$postLink=function(){this.stepNumber=this.$stepper.$addStep(this)},e.prototype.isActive=function(){var e=this.$stepper.isActiveStep(this);return e},e.$inject=["$element","$compile","$scope"],e}();angular.module("mdSteppers",["ngMaterial"]).factory("$mdStepper",StepperServiceFactory).directive("mdStepper",function(){return{transclude:!0,scope:{linear:"<?mdLinear",alternative:"<?mdAlternative",vertical:"<?mdVertical",mobileStepText:"<?mdMobileStepText",labelStep:"@?mdLabelStep",labelOf:"@?mdLabelOf"},bindToController:!0,controller:StepperCtrl,controllerAs:"stepper",templateUrl:"mdSteppers/mdStepper.tpl.html"}}).directive("mdStep",["$compile",function(e){return{require:"^^mdStepper",transclude:!0,scope:{label:"@mdLabel",optional:"@?mdOptional"},bindToController:!0,controller:StepCtrl,controllerAs:"$ctrl",link:function(t,r,s,p){function n(){var s=!!r.find(".md-step-body-overlay")[0];if(!s){var p=angular.element('<div class="md-step-body-overlay"></div>\n                            <div class="md-step-body-loading">\n                                <md-progress-circular md-mode="indeterminate"></md-progress-circular>\n                            </div>');e(p)(t),r.find(".md-steppers-scope").append(p)}}t.$ctrl.$stepper=p,t.$watch(function(){return t.$ctrl.isActive()},function(e){e?(r.addClass("md-active"),n()):r.removeClass("md-active")})},templateUrl:"mdSteppers/mdStep.tpl.html"}}]).config(["$mdIconProvider",function(e){e.icon("steppers-check","mdSteppers/ic_check_24px.svg"),e.icon("steppers-warning","mdSteppers/ic_warning_24px.svg")}]).run(["$templateCache",function(e){e.put("mdSteppers/ic_check_24px.svg",'<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\r\n    <path d="M0 0h24v24H0z" fill="none"/>\r\n    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>\r\n</svg>'),e.put("mdSteppers/ic_warning_24px.svg",'<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\r\n    <path d="M0 0h24v24H0z" fill="none"/>\r\n    <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>\r\n</svg>')}]),angular.module("mdSteppers").run(["$templateCache",function(e){e.put("mdSteppers/mdStep.tpl.html",'<div class="md-stepper" ng-class="{ \'md-active\': $ctrl.isActive() }">\r\n    <md-steppers-header class="md-steppers-header md-steppers-vertical">\r\n        <button class="md-stepper-indicator" ng-class="{\r\n                    \'md-active\': $ctrl.stepNumber === $ctrl.$stepper.currentStep,\r\n                    \'md-completed\': $ctrl.$stepper.isCompleted($ctrl.stepNumber),\r\n                    \'md-error\': $ctrl.hasError,\r\n                    \'md-stepper-optional\': $ctrl.optional || $ctrl.hasError\r\n                }" ng-click="$ctrl.$stepper.goto($ctrl.stepNumber)" ng-disabled="$ctrl.$stepper.linear || $ctrl.stepNumber === $ctrl.$stepper.currentStep">\r\n                <div class="md-stepper-indicator-wrapper">\r\n                    <div class="md-stepper-number" ng-hide="$ctrl.hasError">\r\n                    <span ng-if="!$ctrl.$stepper.isCompleted($ctrl.stepNumber)">{{ ::$ctrl.stepNumber+1 }}</span>\r\n                        <md-icon md-svg-icon="steppers-check" class="md-stepper-icon" ng-if="$ctrl.$stepper.isCompleted($ctrl.stepNumber)"></md-icon>\r\n                    </div>\r\n                    <div class="md-stepper-error-indicator" ng-show="$ctrl.hasError">\r\n                        <md-icon md-svg-icon="steppers-warning"></md-icon>\r\n                    </div>\r\n\r\n                    <div class="md-stepper-title">\r\n                        <span>{{ $ctrl.label }}</span>\r\n                        <small ng-if="$ctrl.optional && !$ctrl.hasError">{{ $ctrl.optional }}</small>\r\n                        <small class="md-stepper-error-message" ng-show="$ctrl.hasError">\r\n                            {{ $ctrl.message }}\r\n                        </small>\r\n                    </div>\r\n                </div>\r\n                </button>\r\n        <div class="md-stepper-feedback-message" ng-show="stepper.hasFeedback">\r\n            {{stepper.feedbackMessage}}\r\n        </div>\r\n    </md-steppers-header>\r\n    <md-steppers-scope layout="column" class="md-steppers-scope" ng-if="$ctrl.isActive()" ng-transclude></md-steppers-scope>\r\n</div>'),e.put("mdSteppers/mdStepper.tpl.html",'<div flex class="md-steppers" ng-class="{ \r\n    \'md-steppers-linear\': stepper.linear, \r\n    \'md-steppers-alternative\': stepper.alternative,\r\n    \'md-steppers-vertical\': stepper.vertical,\r\n    \'md-steppers-mobile-step-text\': stepper.mobileStepText,\r\n    \'md-steppers-has-feedback\': stepper.hasFeedback\r\n    }">\r\n    <div class="md-steppers-header-region">\r\n        <md-steppers-header class="md-steppers-header md-steppers-horizontal md-whiteframe-1dp">\r\n            <button class="md-stepper-indicator" ng-repeat="(stepNumber, $step) in stepper.steps track by $index" ng-class="{\r\n                \'md-active\': stepNumber === stepper.currentStep,\r\n                \'md-completed\': stepper.isCompleted(stepNumber),\r\n                \'md-error\': $step.hasError,\r\n                \'md-stepper-optional\': $step.optional || $step.hasError\r\n            }" ng-click="stepper.goto(stepNumber)" ng-disabled="stepper.linear || stepNumber === stepper.currentStep">\r\n            <div class="md-stepper-indicator-wrapper">\r\n                <div class="md-stepper-number" ng-hide="$step.hasError">\r\n                    <span ng-if="!stepper.isCompleted(stepNumber)">{{ ::stepNumber+1 }}</span>\r\n                    <md-icon md-svg-icon="steppers-check" class="md-stepper-icon" ng-if="stepper.isCompleted(stepNumber)"></md-icon>\r\n                </div>\r\n\r\n                <div class="md-stepper-error-indicator" ng-show="$step.hasError">\r\n                <md-icon md-svg-icon="steppers-warning"></md-icon>\r\n                </div>\r\n                <div class="md-stepper-title">\r\n                    <span>{{ $step.label }}</span>\r\n                    <small ng-if="$step.optional && !$step.hasError">{{ $step.optional }}</small>\r\n                    <small class="md-stepper-error-message" ng-show="$step.hasError">\r\n                        {{ $step.message }}\r\n                    </small>\r\n                </div>\r\n            </div>\r\n            </button>\r\n           \r\n        </md-steppers-header>\r\n        <md-steppers-mobile-header class="md-steppers-mobile-header">\r\n            <md-toolbar flex="none" class="md-whiteframe-1dp" style="background: #f6f6f6 !important; color: #202020 !important;">\r\n                <div class="md-toolbar-tools">\r\n                    <h3>\r\n                        <span>{{stepper.labelStep}} {{stepper.currentStep+1}} {{stepper.labelOf}} {{stepper.steps.length}}</span>\r\n                    </h3>\r\n                </div>\r\n            </md-toolbar>\r\n        </md-steppers-mobile-header>\r\n        <div class="md-stepper-feedback-message" ng-show="stepper.hasFeedback">\r\n            {{stepper.feedbackMessage}}\r\n        </div>\r\n    </div>\r\n    <md-steppers-content class="md-steppers-content" ng-transclude></md-steppers-content>\r\n    <div class="md-steppers-overlay"></div>\r\n</div>')}]);
\ No newline at end of file
+var StepperCtrl=function(){function e(e,t,r,s){this.$mdComponentRegistry=e,this.$attrs=t,this.$log=r,this.$scope=s,this.labelStep="Step",this.labelOf="of",this.steps=[],this.currentStep=0}return e.prototype.$onInit=function(){""===this.$attrs.mdMobileStepText&&(this.mobileStepText=!0),""===this.$attrs.mdLinear&&(this.linear=!0),""===this.$attrs.mdAlternative&&(this.alternative=!0)},e.prototype.$postLink=function(){this.$attrs.id||this.$log.warn("You must set an id attribute to your stepper"),this.registeredStepper=this.$mdComponentRegistry.register(this,this.$attrs.id)},e.prototype.$onDestroy=function(){this.registeredStepper&&this.registeredStepper()},e.prototype.$addStep=function(e){return this.steps.push(e)-1},e.prototype.next=function(){return this.currentStep<this.steps.length&&(this.clearError(),this.currentStep++,this.clearFeedback(),this.$scope.$emit("onstepcomplete",this.currentStep),!0)},e.prototype.back=function(){return this.currentStep>0&&(this.clearError(),this.currentStep--,this.clearFeedback(),!0)},e.prototype.skip=function(){var e=this.steps[this.currentStep];return!!e.optional&&(this.currentStep++,this.clearFeedback(),!0)},e.prototype.error=function(e){var t=this.steps[this.currentStep];t.hasError=!0,t.message=e,this.clearFeedback()},e.prototype.clearError=function(){var e=this.steps[this.currentStep];e.hasError=!1},e.prototype["goto"]=function(e){return e<this.steps.length&&(this.currentStep=e,this.clearFeedback(),this.$scope.$emit("gotostepcomplete",this.currentStep),!0)},e.prototype.showFeedback=function(e){this.hasFeedback=!0,this.feedbackMessage=e},e.prototype.clearFeedback=function(){this.hasFeedback=!1},e.prototype.isCompleted=function(e){return this.linear&&e<this.currentStep},e.prototype.isActiveStep=function(e){return this.steps.indexOf(e)===this.currentStep},e.$inject=["$mdComponentRegistry","$attrs","$log","$scope"],e}(),StepperServiceFactory=["$mdComponentRegistry",function(e){return function(t){var r=e.get(t);return r||e.notFoundError(t),r}}],StepCtrl=function(){function e(e,t,r){this.$element=e,this.$compile=t,this.$scope=r}return e.prototype.$postLink=function(){this.stepNumber=this.$stepper.$addStep(this)},e.prototype.isActive=function(){var e=this.$stepper.isActiveStep(this);return e},e.$inject=["$element","$compile","$scope"],e}();angular.module("mdSteppers",["ngMaterial"]).factory("$mdStepper",StepperServiceFactory).directive("mdStepper",function(){return{transclude:!0,scope:{linear:"<?mdLinear",alternative:"<?mdAlternative",vertical:"<?mdVertical",mobileStepText:"<?mdMobileStepText",labelStep:"@?mdLabelStep",labelOf:"@?mdLabelOf"},bindToController:!0,controller:StepperCtrl,controllerAs:"stepper",templateUrl:"mdSteppers/mdStepper.tpl.html"}}).directive("mdStep",["$compile",function(e){return{require:"^^mdStepper",transclude:!0,scope:{label:"@mdLabel",optional:"@?mdOptional"},bindToController:!0,controller:StepCtrl,controllerAs:"$ctrl",link:function(t,r,s,p){function n(){var s=!!r.find(".md-step-body-overlay")[0];if(!s){var p=angular.element('<div class="md-step-body-overlay"></div>\n                            <div class="md-step-body-loading">\n                                <md-progress-circular md-mode="indeterminate"></md-progress-circular>\n                            </div>');e(p)(t),r.find(".md-steppers-scope").append(p)}}t.$ctrl.$stepper=p,t.$watch(function(){return t.$ctrl.isActive()},function(e){e?(r.addClass("md-active"),n()):r.removeClass("md-active")})},templateUrl:"mdSteppers/mdStep.tpl.html"}}]).config(["$mdIconProvider",function(e){e.icon("steppers-check","mdSteppers/ic_check_24px.svg"),e.icon("steppers-warning","mdSteppers/ic_warning_24px.svg")}]).run(["$templateCache",function(e){e.put("mdSteppers/ic_check_24px.svg",'<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\r\n    <path d="M0 0h24v24H0z" fill="none"/>\r\n    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>\r\n</svg>'),e.put("mdSteppers/ic_warning_24px.svg",'<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\r\n    <path d="M0 0h24v24H0z" fill="none"/>\r\n    <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>\r\n</svg>')}]),angular.module("mdSteppers").run(["$templateCache",function(e){e.put("mdSteppers/mdStep.tpl.html",'<div class="md-stepper" ng-class="{ \'md-active\': $ctrl.isActive() }">\n    <md-steppers-header class="md-steppers-header md-steppers-vertical">\n        <button class="md-stepper-indicator" ng-class="{\n                    \'md-active\': $ctrl.stepNumber === $ctrl.$stepper.currentStep,\n                    \'md-completed\': $ctrl.$stepper.isCompleted($ctrl.stepNumber),\n                    \'md-error\': $ctrl.hasError,\n                    \'md-stepper-optional\': $ctrl.optional || $ctrl.hasError\n                }" ng-click="$ctrl.$stepper.goto($ctrl.stepNumber)" ng-disabled="$ctrl.$stepper.linear || $ctrl.stepNumber === $ctrl.$stepper.currentStep">\n                <div class="md-stepper-indicator-wrapper">\n                    <div class="md-stepper-number" ng-hide="$ctrl.hasError">\n                    <span ng-if="!$ctrl.$stepper.isCompleted($ctrl.stepNumber)">{{ ::$ctrl.stepNumber+1 }}</span>\n                        <md-icon md-svg-icon="steppers-check" class="md-stepper-icon" ng-if="$ctrl.$stepper.isCompleted($ctrl.stepNumber)"></md-icon>\n                    </div>\n                    <div class="md-stepper-error-indicator" ng-show="$ctrl.hasError">\n                        <md-icon md-svg-icon="steppers-warning"></md-icon>\n                    </div>\n\n                    <div class="md-stepper-title">\n                        <span>{{ $ctrl.label }}</span>\n                        <small ng-if="$ctrl.optional && !$ctrl.hasError">{{ $ctrl.optional }}</small>\n                        <small class="md-stepper-error-message" ng-show="$ctrl.hasError">\n                            {{ $ctrl.message }}\n                        </small>\n                    </div>\n                </div>\n                </button>\n        <div class="md-stepper-feedback-message" ng-show="stepper.hasFeedback">\n            {{stepper.feedbackMessage}}\n        </div>\n    </md-steppers-header>\n    <md-steppers-scope layout="column" class="md-steppers-scope" ng-show="$ctrl.isActive()" ng-transclude></md-steppers-scope>\n</div>'),e.put("mdSteppers/mdStepper.tpl.html",'<div flex class="md-steppers" ng-class="{ \n    \'md-steppers-linear\': stepper.linear, \n    \'md-steppers-alternative\': stepper.alternative,\n    \'md-steppers-vertical\': stepper.vertical,\n    \'md-steppers-mobile-step-text\': stepper.mobileStepText,\n    \'md-steppers-has-feedback\': stepper.hasFeedback\n    }">\n    <div class="md-steppers-header-region">\n        <md-steppers-header class="md-steppers-header md-steppers-horizontal md-whiteframe-1dp">\n            <button class="md-stepper-indicator" ng-repeat="(stepNumber, $step) in stepper.steps track by $index" ng-class="{\n                \'md-active\': stepNumber === stepper.currentStep,\n                \'md-completed\': stepper.isCompleted(stepNumber),\n                \'md-error\': $step.hasError,\n                \'md-stepper-optional\': $step.optional || $step.hasError\n            }" ng-click="stepper.goto(stepNumber)" ng-disabled="stepper.linear || stepNumber === stepper.currentStep">\n            <div class="md-stepper-indicator-wrapper">\n                <div class="md-stepper-number" ng-hide="$step.hasError">\n                    <span ng-if="!stepper.isCompleted(stepNumber)">{{ ::stepNumber+1 }}</span>\n                    <md-icon md-svg-icon="steppers-check" class="md-stepper-icon" ng-if="stepper.isCompleted(stepNumber)"></md-icon>\n                </div>\n\n                <div class="md-stepper-error-indicator" ng-show="$step.hasError">\n                <md-icon md-svg-icon="steppers-warning"></md-icon>\n                </div>\n                <div class="md-stepper-title">\n                    <span>{{ $step.label }}</span>\n                    <small ng-if="$step.optional && !$step.hasError">{{ $step.optional }}</small>\n                    <small class="md-stepper-error-message" ng-show="$step.hasError">\n                        {{ $step.message }}\n                    </small>\n                </div>\n            </div>\n            </button>\n           \n        </md-steppers-header>\n        <md-steppers-mobile-header class="md-steppers-mobile-header">\n            <md-toolbar flex="none" class="md-whiteframe-1dp" style="background: #f6f6f6 !important; color: #202020 !important;">\n                <div class="md-toolbar-tools">\n                    <h3>\n                        <span>{{stepper.labelStep}} {{stepper.currentStep+1}} {{stepper.labelOf}} {{stepper.steps.length}}</span>\n                    </h3>\n                </div>\n            </md-toolbar>\n        </md-steppers-mobile-header>\n        <div class="md-stepper-feedback-message" ng-show="stepper.hasFeedback">\n            {{stepper.feedbackMessage}}\n        </div>\n    </div>\n    <md-steppers-content class="md-steppers-content" ng-transclude></md-steppers-content>\n    <div class="md-steppers-overlay"></div>\n</div>')}]);
\ No newline at end of file
diff --git a/lib/material-steppers.ts b/lib/material-steppers.ts
index 04abb4b..5dfeba5 100644
--- a/lib/material-steppers.ts
+++ b/lib/material-steppers.ts
@@ -3,7 +3,8 @@ class StepperCtrl {
     public static $inject = [
         '$mdComponentRegistry',
         '$attrs',
-        '$log'
+        '$log',
+        '$scope'
     ];
 
     /* Bindings */
@@ -27,7 +28,8 @@ class StepperCtrl {
     constructor(
         private $mdComponentRegistry,
         private $attrs,
-        private $log
+        private $log,
+        private $scope: ng.IScope
     ) { }
 
 
@@ -77,6 +79,7 @@ class StepperCtrl {
             this.clearError();
             this.currentStep++;
             this.clearFeedback();
+            this.$scope.$emit('onstepcomplete', this.currentStep);
             return true;
         }
         return false;
@@ -148,6 +151,7 @@ class StepperCtrl {
         if (stepNumber < this.steps.length) {
             this.currentStep = stepNumber;
             this.clearFeedback();
+            this.$scope.$emit('gotostepcomplete', this.currentStep);
             return true;
         }
         return false;
@@ -173,7 +177,7 @@ class StepperCtrl {
 
     isCompleted(stepNumber: number) {
         return this.linear && stepNumber < this.currentStep;
-    };
+    }
 
     isActiveStep(step: StepCtrl) {
         return this.steps.indexOf(step) === this.currentStep;
diff --git a/lib/mdStep.tpl.html b/lib/mdStep.tpl.html
index c7387f8..7dc9f3d 100644
--- a/lib/mdStep.tpl.html
+++ b/lib/mdStep.tpl.html
@@ -28,5 +28,5 @@
             {{stepper.feedbackMessage}}
         </div>
     </md-steppers-header>
-    <md-steppers-scope layout="column" class="md-steppers-scope" ng-if="$ctrl.isActive()" ng-transclude></md-steppers-scope>
+    <md-steppers-scope layout="column" class="md-steppers-scope" ng-show="$ctrl.isActive()" ng-transclude></md-steppers-scope>
 </div>
\ No newline at end of file