Using ion-tab and ng-click together

I'm trying to get <ion-tab> working with ng-click, The problem is, I get the ActionSheet to pick the option. However the page is not loading,

Following is my code

#tabs.html
<ion-tab title="Recipe" icon-off="ion-pizza" icon-on="ion-pizza assertive" ng-click="recipeAction()">
  <ion-nav-view name="manage-recipe"></ion-nav-view>
</ion-tab>

#click event
$scope.recipeAction = function(){
    $ionicActionSheet.show({
      buttons: [
        { text: 'Add new recipe' },
        { text: 'Draft Recipes' },
      ],
      titleText: 'Manage your recipes',
      cancelText: 'Cancel',
      buttonClicked: function(index){
        var path = '';
        switch(index){
          case 0:
           path = 'app.new';
           break;
          case 1:
           path = 'app.unpublished';
           break;
        }
        $state.go(path);
      }
    });
  }

#app.js
  .state('app.unpublished', {
    url: '/unpublished',
    views: {
      'manage-recipe': {
        templateUrl: 'templates/recipes/unpublished.html',
        controller: 'unpublishedCtrl'
      }
    }
  })

When I click the tab, it loads the ActionSheet and the issue is when I select an options , say 'Draft Recipes', it doesnt load the new_recipe page to the tab.

However it changes the url to http://localhost:8100/#/app/unpublished (which is correct and I have a html file with the same name)

What could I be missing here, any help would be appreciated, Thanks in advance