angularjs - Angular ui router controlleras syntax not working -

i trying develop angular app using ui router, stuck trying controlleras syntax working correctly.

my stateprovider looks this

$stateprovider     .state('microsite', {       url: "/",       templateurl: "microsite.tmpl.html",       abstract: true     })     .state('microsite.home', {       url: "",       templateurl: "home.tmpl.html",       controller: 'micrositecontroller vm',       data: {         page_name: 'introduction'       }     })     .state('microsite.features', {       url: "/features",       templateurl: "features.tmpl.html",       controller: 'micrositecontroller vm',       data: {         page_name: 'features'       }     })     .state('microsite.about', {       url: "/about",       templateurl: "about.tmpl.html",       controller: 'micrositecontroller vm',       data: {         page_name: 'about'       }     }); 

as can see setup abstract default view, , 3 pages. have assigned data object page_name each page. feeds controller

myapp.controller('micrositecontroller', ['$state', function($state) {   var vm = this;   vm.page_name = $state.current.data.page_name;   vm.sidenav_locked_open = false;    vm.togglesidenav = function() {     if ($mdmedia('gt-sm')) {       vm.sidenav_locked_open = !vm.sidenav_locked_open;     } else {       $mdsidenav('left').toggle();     }   } }]); 

and delivers name page via vm.page_name variable. not happening. variable never makes page. have vm.togglesidenav function suppose open , close sidenav, never gets called.

the toolbar sidenav button this

<md-toolbar layout="row" class="md-whiteframe-glow-z1 site-content-toolbar"> <div class="md-toolbar-tools docs-toolbar-tools" tabindex="-1">     <md-button class="md-icon-button" ng-click="vm.togglesidenav()" aria-label="toggle menu">         xxx     </md-button>      <h1>{{vm.page_name}}</h1> </div> </md-toolbar> 

here plnkr example http://plnkr.co/edit/na5zkf?p=preview

i looking me figure out last piece on how togglesidenav function called when click on xxx button, , how title display in toolbar.

from docs:

controller (optional) string function

controller fn should associated newly related scope or name of registered controller if passed string. optionally, controlleras may declared here.

 controller: "myregisteredcontroller"   controller:     "myregisteredcontroller fooctrl"   controller: function($scope, myservice) {     $scope.data = myservice.getdata(); } 

-- ui router $stateprovider api reference.

according docs, controller declaration correct.

controller: 'micrositecontroller vm' 

you need problem elsewhere.

i have vm.togglesidenav function suppose open , close sidenav, never gets called.

vm.togglesidenav = function() {     if ($mdmedia('gt-sm')) {       vm.sidenav_locked_open = !vm.sidenav_locked_open;     } else {       $mdsidenav('left').toggle();     }   } 

are $mdmedia , $mdsidenav declared on global name space? or did fail inject them? if $mdmedia('gt-sm') undefined, vm.sidenav_locked_open never toggled.

update

good catch on $mdmedia, did not fix problem. updated plnkr

using plnkr, modified template add button invoke togglesidenav function.

it invokes function error:

referenceerror: $mdmedia not defined @ vm.togglesidenav  

the new plnkr

next update

ugg, got me again, put in $mddialog instead of $mdmedia. discovered needed $mdsidenav. fixed button works, xxx button still not.

the problem xxx button on root state, root state has no specified controller. change config put controller on root state.

  $stateprovider     .state('microsite', {       url: "/",       templateurl: "microsite.tmpl.html",       //put controller on root state       controller: 'micrositecontroller vm',       abstract: true     }) 

the newer plunkr.