Ui-sref not working?

I have got the following but the page does not change after clicking the button, only the url changed:

<button class="button button-clear button-positive" ui-sref="tab.coursedetails">View All</button>

In app.js I have got:

      // 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.home', {
    url: '/home',
    views: {
      'tab-home': {
        templateUrl: 'templates/tab-home.html',
        controller: 'HomeCtrl'
      }
    }
  })

  
  .state('tab.coursedetails', {
    url: '/coursedetails',
    views: {
      'tab-coursedetails': {
        templateUrl: 'templates/page-coursedetails.html',
        controller: 'CourseDetailsCtrl'
      }
    }
  })

hey there ui-sref can only attached to an a-tag… it is something like an href-property.

In your case you should add ng-click to you button, that calls an function on your $scope. The function can use $state.go to navigate to a specific state.

this isint working for me even with an a tag, any suggestions?

  .state('app.social', {
    url: '/login/social',
    views: {
      'menuContent': {
        templateUrl: 'templates/social-login.html',
        controller: 'LoginCtrl'
      }
    }
  })

<a ui-sref="app.social">Or connect using a social account.</a>