Using ion-tab and ng-click together

Hi All,

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

<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>

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

  .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



there is no state defined as and no template associated with it in your app.js.

.state('', {
url: '/new',
views: {
  'manage-recipe': {
    templateUrl: 'templates/recipes/new.html',
    controller: 'newCtrl'


Add the above.

@gaurav_ch, Sorry my bad, That was a mistake from my end, it should be http://localhost:8100/#/app/unpublished. I’ll update the question as well.

Oh I overlooked one problem in your switch case.

The index of button, returned by plugin actionsheet, starts from 1 and not 0. ng-cordova document

Returns Integer - the button index user clicked (first button is index 1).

So, for unpublished the index is 2 and not 1.

Here’s how you do it: