title: All 3 ways of moving to new page on click of button in the ionic navbar dont work
body: <p>Ideally, all 3 methods ought to work. 
  This codepen below shows all 3 methods well. </p>
  
  <p><strong><a href="http://codepen.io/gregorypratt/pen/oJcHx" rel="nofollow">Correct and working CodePen Demo app</a></strong></p>
  
  <p>Currently, neither of the 3 methods work; the navbar just dissappears upon clicking the button (shows empty nav bar) while the core page remains the same main page.</p>
  
  <p>Im not sure if its an code problem, ionic issue or just simply I should not transit to a new page from a navbar. The last one is too illogical to accept though.   </p>
  
  <p>Would any kind souls know where the issue lie and help me please?</p>
  
  <p><strong>My core content code in index.html</strong> </p>
  
  <pre><code>&lt;body animation="slide-left-right-ios7"&gt;
  
          &lt;ion-nav-bar class="bar-light nav-title-slide-ios7"&gt;&lt;/ion-nav-bar&gt;
  
          &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
  </code></pre>
  
  <p><br>
  <strong>The button html I have (Note all 3 versions were tested seperately)</strong> </p>
  
  <pre><code>    &lt;ion-view ng-controller="NavCtrl"&gt; 
  
       &lt;ion-nav-buttons side="left"&gt;
        &lt;button class="button button-icon ion-compose" ng-click="create('tab.newpost')"&gt;&lt;/button&gt;
        &lt;button class="button button-icon ion-compose" ui-sref="tab.newpost"&gt;&lt;/button&gt;
        &lt;button class="button button-icon ion-compose" href="/tab/newpost"&gt;&lt;/button&gt;
       &lt;/ion-nav-buttons&gt;
  
       &lt;ion-content class&gt;
          &lt;!-- Rest of the content body here --&gt; 
       &lt;/ion-content&gt; 
      &lt;/ion-view&gt;
  </code></pre>
  
  <p><br>
  <strong>Code in nav.js mainly for the state.create method</strong></p>
  
  <pre><code>app.controller('NavCtrl', function ($scope, $location, $state, Post, Auth) {
      $scope.post = {url: 'http://', title: ''};
  
      $scope.create = function(stateName) {
        /* $location.path('/tab/newpost'); */ 
        $state.go(stateName);  /* tried swapping stateName with 'tab.newpost' and func() */
      };
    });
  </code></pre>
  
  <p><br>
  <strong>Code for app.js (Route file)</strong> </p>
  
  <pre><code>    var app = angular.module('MyApp', ['ionic','firebase']);
  
      app.config(function($stateProvider, $urlRouterProvider) {
          $stateProvider
  
          .state('tab', {
            url: '/tab',
            abstract: true,
            templateUrl: 'templates/tabs.html'
          })
  
          .state('tab.posts', {
            url: '/posts',
            views: {
              'tab-posts': {
                templateUrl: 'templates/tab-posts.html',
                controller: 'PostsCtrl'
              }
            }
          })
  
          .state('tab.newpost', {
            url: '/newpost',
            views: {
              'tab-newpost':{
                templateUrl: 'templates/tab-newpost.html',
                controller: 'NewCtrl'
              }
            }
          });
  
          /* + other states .... */
  
  $urlRouterProvider.otherwise('/auth/login');
  });
  </code></pre>