angularjs - Unknown provider: eProvider <- e when showing material angular dialog -

i'm trying material angular's dialog wired up. code below. error, unknown provider: eprovider <- e.

js

var app = angular.module('app', ['ngmaterial']);  var dialogcontroller = app.controller('dialogcontroller', ['$scope', '$mddialog', function($scope, $mddialog) {     $scope.hide = function () {         $mddialog.hide();     };     $scope.cancel = function () {         $mddialog.cancel();     };     $scope.answer = function (answer) {         $mddialog.hide(answer);     }; }]);  app.controller('maincontroller', ['$scope', '$http', '$mddialog', function ($scope, $http, $mddialog) {     $scope.showdialog = function (e) {         e.preventdefault();         $mddialog.show({             controller: dialogcontroller,             templateurl: 'sign-in.html',             targetevent: e         });     }; }]); 

html

<a href="#" ng-click="showdialog($event)">show dialog</a>  <script type="text/ng-template" id="sign-in.html">     hello there </script> 

am missing anything?

var app = angular.module('app', ['ngmaterial']);  var dialogcontroller = function($scope, $mddialog) {    $scope.hide = function () {       $mddialog.hide();    };    $scope.cancel = function () {       $mddialog.cancel();    };    $scope.answer = function (answer) {        $mddialog.hide(answer);    }; };  app.controller('maincontroller', ['$scope', '$http', '$mddialog', function ($scope, $http, $mddialog) {     $scope.showdialog = function (e) {        $mddialog.show({          controller: dialogcontroller,          templateurl: 'sign-in.html',          targetevent: e       });    }; }]); 

html call :

 <md-button class="md-primary" ng-click="showdialog($event)">show dialog</md-button>