button - How to navigate to different pages using ui-route with angularjs? -

i have used tabs , routed pages ui-router, have changed layout , having buttons in side navigation panel route different pages on button click. no idea how go after trying many examples.

i need navigate dashboards.html when user clicks dashboard navigation menu.

here code:

<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdmedia('gt-md')">              <md-list>       <md-item ng-repeat="item in menu">         <a>           <md-item-content md-ink-ripple layout="row" layout-align="start center">             <div class="inset">                <ng-md-icon icon="{{item.icon}}"  ></ng-md-icon>                <md-tooltip   md-direction="right">{{item.title}}</md-tooltip>             </div>                        </md-item-content>            <md-divider></md-divider>         </a>       </md-item>       <md-divider></md-divider>      <md-item ng-repeat="item in admin">         <a>           <md-item-content md-ink-ripple layout="row" layout-align="start center">             <div class="inset">               <ng-md-icon icon="{{item.icon}}"></ng-md-icon>                <md-tooltip   md-direction="right">{{item.title}}</md-tooltip>             </div>           </md-item-content>         </a>       </md-item>     </md-list> </md-sidenav> 

here plnker

you use ui-sref="statename()" or ui-sref="statename({param: 'value'})" creating href on html, seems need add states app.config (configuration phase), below example can refer

note

ui-sref never work on button because create href tag dynamically , href attribute url, won't work on button element, i'd suggest wrap button inside anchor(<a></a>) tag

example

$stateprovider .state("statename": {   url: "/statename/:id",   template: "/test.html",   controller: 'testctrl' }); 

html

<a ui-sref="statename({id: 1})">     <button type="button"> </a> 

this dynamically create href tag ``

<a  ng-href="#/statename/1">     <button type="button"> </a> 

reference so answer

update

other work around need write ng-click event , ng-click function redirect on route using $state.go('statename'),

you need change html menu code below. i've added ng-click="$parent.navigate(item.icon)" & add new method in controller navigate $state.go(statename)

markup

 <md-item ng-repeat="item in menu">     <a>       <md-item-content md-ink-ripple layout="row" layout-align="start center"          ng-click="$parent.navigate(item.icon)">         <div class="inset">            <ng-md-icon icon="{{item.icon}}"  ></ng-md-icon>            <md-tooltip   md-direction="right">{{item.title}}</md-tooltip>         </div>        </md-item-content>        <md-divider></md-divider>     </a>   </md-item> 

code

$scope.navigate = function(routename){   $state.go(routename) }; 

working plunkr