How to customise template for ng-material-floating-button

1

I have put an floating action button in my dashboard page using ng-material-floating-button as shown below, when I click the button, it should route to “check” template, however only the url in browser changes, but the page still stays same, I have checked that the “check” template exists in my “templates” folder. Thus, I 'm not sure what’s the underlying problem cause this happens.

<nav mfb-menu position="br" effect="zoomin" label="hover here"
   active-icon="ion-android-close" resting-icon="ion-android-add"
   toggling-method="click" main-action="fireMainAction()">
   
    <button mfb-button ui-sref="{{button.template}}" icon="{{button.icon}}" label="{{button.label}}" ng-repeat="button in buttons">
    </button>

For the controller of the dashboard page, I have created array for the items in the floating button:

$scope.buttons = [{
    label: 'check-in/out',
    icon: 'ion-android-checkmark-circle',
    template: 'check'
  },{
    label: 'Time-off',
    icon: 'ion-android-time',
    template: 'dash-timeoff'
  },{
    label: 'Shift Change',
    icon: 'ion-arrow-swap',
    template: 'tab.dash-shift'
  }];

In the app.js, the state is set as below:

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

  // setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})

// Each tab has its own nav history stack:

.state('tab.dash', {
url: '/dash',
views: {
  'tab-dash': {
    templateUrl: 'templates/tab-dash.html',
    controller: 'DashCtrl'
  }
}
})

.state('check', {
url: '/check',
views: {
  'dash-check': {
    templateUrl: 'templates/dash-check.html',
    controller: 'CheckCtrl'
  }
}
});
});

The check page template:

<ion-view view-title="Second page">
  <ion-content class="padding">
  </ion-content>
</ion-view>