AngularJS - Not able to update model programatically

Question

When I update my model through method, model does not update. Below is my AngularJS code:

var app = angular.module('MyApp',[]);

app.controller('businessCtrl', function($scope, Business) {
  $scope.businesses = Business.query();  // getting data using REST
  $scope.currentBusinessIndex = 0;
  $scope.changeBusinessIndex = function (indx) {
      if (indx) {
          $scope.currentBusinessIndex = indx;
      } else {
          $scope.currentBusinessIndex = 0;
      }
  };
});

Below is the HTML:

<ul class="signups">
    <li ng-controller="businessCtrl" ng-repeat="business in businesses">
        <div class="user pull-left"  ng-click="changeBusinessIndex($index)">
            <img ng-src="http://localhost:8081{{business.logo.uri}}" alt="business logo" >
        </div>
        <div class="info" ng-click="changeBusinessIndex($index)">
            <h6 ng-cloak>{{business.name}}</h6>
            <small ng-cloak>{{business.streetAddress + ',' + business.city + ',' + business.country}}</small>
        </div>
    </li>
</ul>

<div id="business-image" class="main-container" ng-controller="businessCtrl">
    <img ng-src="http://localhost:8081{{businesses[currentBusinessIndex].logo.uri}}" alt="Business Logo">
</div>

Problem:

In changeBusinessIndex() method, when I modify currentBusinessIndex, it does not modify and as a result image in "business-image" div is not updating.

Anders Bornholm · Accepted Answer · 2013-12-02 15:44:11Z

1

You are creating two different instances of businessCtrl, one for the li (let's call it businessCtrl1) and one for the business-image div (let's call that businessCtrl2). When you are calling changeBusinessIndex() in the li-instance it will update currentBusinessIndex for businessCtrl1, but not for the other instance.

Set ng-controller="businessCtrl" on an element that wraps both the li and the business-image divs to get a single instance of the controller, something like:

<div ng-controller="businessCtrl>
    <li ng-repeat ... etc ></li>
    <div id="business-image" ... ></div>
</div>

answered Dec 2, 2013 at 15:44

Anders Bornholm

1,3368 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maxim Shoustin · Accepted Answer · 2013-12-02 16:14:18Z

First of all it seems strange that you call twice ng-controller="businessCtrl" (with the same name). But if you interesting to use two different controllers I would store currentBusinessIndex into the Service and use it as storage. Since service is singleton, you can register the service to both controllers and by this way your logic should work.

HTML

<div ng-controller="MyCtrl_1">
    <button ng-click="showMe();">press  me</button>
    <pre>{{myStorage.getIndex()}}</pre>
</div>

<div ng-controller="MyCtrl_2">
    <pre>{{myStorage.getIndex()}}</pre>
</div>

JS

var myApp = angular.module('myApp', []);

function MyCtrl_1($scope,  myStorage) {   
    $scope.myStorage = myStorage;

    $scope.showMe = function(){
      myStorage.setIndex(3);
    }
}

function MyCtrl_2($scope,  myStorage) {   
    $scope.myStorage = myStorage;    
}


myApp.factory('myStorage', function () {

       var currentBusinessIndex = 0;

       return {
            getIndex: function () {                
               return currentBusinessIndex;
            },
           setIndex: function (index) {
               currentBusinessIndex = index;               
            }
        }
  });

Demo Fiddle

Collectives™ on Stack Overflow

AngularJS - Not able to update model programatically

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related