Cant update $scope from ion-nav

1

In my App I need a “add to wishlist” function.

In the productDetail view when someone tapps “add to wishlist” I add this product with a service and webSQL to the database.

Now when the user goes to the wishlist view I get all saved products but the view doesn’t update.

I have a file menu.html with an Ionic side-menu:

  <ion-side-menu side="left" expose-aside-when="large" width="72">
        <ion-content>
          <ion-list ng-controller="LeftMenuCtrl">
        <ion-item nav-clear menu-close ng-href="#/app/wish" ng-click="updateWishList()" ng-class="{'current': isActive('/app/wish')}">
          <span class="icon icon-menu-wish"></span>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>

The “LeftMenuCtrl” handels the hover for the active menu item.
In my WishListView I would like to show the current added products:
File wishList.html

<ion-view hide-nav-bar="true" view-title="WISHLIST" ng-controller="WishlistCtrl">
  <div class="bar bar-header bar-stable">
    <div class="header-wrapper">
      <!--heading-->
      <div class="dash-slider-wrapper"" >
        <div class="header-text-main">WHISH</div> <div class="header-text-sub">LIST</div>
      </div>
    </div>
  </div>
  <ion-content class="has-header">
    <ion-item class="product-card" ng-repeat="product in products">
      <div class="card">
        EAN: {{product.ean}}
      </div>
    </ion-item>
  </ion-content>
</ion-view>

And the controller:

app.controller("WishlistCtrl", function($scope, $state, productService) {

//gets called when the controller is loaded

    productService.getWishlistProducts().then(function (products) {
      $scope.products = products;
    });

//gets called when the user clicks on the navi but does not 
//update the $scope (or it updates the wrong $scope)

    $scope.updateWishList = function () {
      productService.getWishlistProducts().then(function (products) {
        $scope.products = products;
      });
    };
  })

Can anyone tell me whats wrong here please?

Edit: You can see a Plunker here: http://plnkr.co/edit/0woPfN
It’s not working but you can see all importand file there…

2

Finally, I got it working.
First in the StateProvicer I added a resolve method:

  .state('app.wish', {
    url: "/wish",
    views: {
      'menuContent': {
        templateUrl: "templates/wish.html",
        controller: 'WishlistCtrl',
        resolve: {
          products: function(productService) {
            return productService.getWishlistProducts()
          }
        }
      }
    }
  })

And to update the model when a new product gets added to the wishlist:

  .controller("WishlistCtrl", function($scope, $state, productService, products) {

    //set wishlist products on controller load
    $scope.products = products;

    //updated wishlist when a new product gets added
    $rootScope.$on('updatedWishList', function() {
      console.log('List has been updated. ');
      productService.getWishlistProducts().then(function (products) {
        $scope.products = products;
      });
    });
  })

Easy… when you know how ^^