The $scope Variable Is Undefined Unless I Forced It To Retrieve From Service Again

Here is the code snippet about an Angular Controller. I'm trying to learn Angular from this github project The questionable part is located in function addStock. I have already def

Solution 1:

Can you do a console.log($scope.watchlist); after both of your $scope binds to see if the data and its type match?

$scope.watchlist = WatchlistService.query($routeParams.listId);

 console.log($scope.watchlist);

  $scope.watchlist.addStock({
    listId: $routeParams.listId,
    company: $scope.newStock.company,
    shares: $scope.newStock.shares
  });

console.log($scope.watchlist); 

Feel free to post the logs.

Solution 2:

It appears as if you are calling $scope.addStock() from a modal. In which case the modal does not necessarily inherit the parent scope. It depends on which versions of everything you are using. It looks like you are using angular-strap (I looked in your bower.json). If you look in their $modal source code you will find this:

https://github.com/mgcrea/angular-strap/blob/master/src/modal/modal.js

var scope = $modal.$scope = options.scope && options.scope.$new() || $rootScope.$new();

So, when you are opening your modal you are creating a new scope. You might be able to access the original scope using $parent though.