AngularJS view not updated by the controller

Question

Everything is in the title... I can't get this to work:

(function(angular) {
  'use strict';
  angular.module('app', [])
    .controller('ctrl', ['$scope', function($scope) {
      $scope.init = function() {
        $scope.response = "press the button";
      }();

      $scope.data = {
        availableOptions: [{
          id: '1',
          name: 'num'
        }],
        selectedOption: {
          name: 'selected field'
        }
      };

      $scope.data2 = {
        availableOptions2: [{
            id: '0',
            name: 'null'
          }
        ],
        selectedOption2: {
          name: 'null'
        }
      };

      $scope.search = function() {
        $scope.response = "you pressed a button \\o/";
        alert($scope.response);
      };

      $scope.request = function(req) {
        $http(req).then(function() { /*successCallback*/ },
          function() { /*errorCallback*/ });
      };

    }]);
})(window.angular);

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="//code.angularjs.org/1.7.3/angular.min.js"></script>
  <script src="analyzer.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="ctrl" ng-show="true">
    <!--class="ng-hide" is automatically added when ng-show="false"-->

    <!--SEARCH-->
    <form name="myForm">
      <label for="mySelect">Select a field:</label>
      <select name="mySelect" id="mySelect" ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption"></select>
      <br/>
      <div style="color:#757575">
        <input ng-model="query" type="text" size=45 class="form-control" placeholder="Search your {{data.selectedOption.name}} here..." />
        <div ng-show="true">
          or directly select your choice here...
          <select name="subSelect" id="subSelect" ng-options="option.name for option in data2.availableOptions2
        track by option.id" ng-model="data2.selectedOption2"></select>
          <br/>
          <button style="color:#757575" ng-click="search()">
            ...and go!</button>
        </div>
      </div>
    </form>

    <!--RESPONSE-->
    <div ng-controller="ctrl" ng-show="true">
      <p>{{response}}</p>
    </div>
  </div>
</body>

</html>

We can see that, even in this snippet, the view is not updated when I change the value of $scope.response... and alert($scope.response) shows that the button is okay... The use of things like $interval, $timeout, $apply, $watch did not solve the problem. Any ideas?

Thanks for your time.

And sorry if it was a dupe ; I just couldn't find the solution.

It's perfectly okay to ask and answer your own question on a Stack Exchange site. See Can I answer my own question? You can also accept your own answer. — georgeawg
– georgeawg, Commented Aug 9, 2018 at 16:06
One can instantiate more than one controller in an app but those controllers will have separate scopes. For more information, see AngularJS Developer Guide - scopes. — georgeawg
– georgeawg, Commented Aug 9, 2018 at 16:10

V. Courtois · Accepted Answer · 2018-08-09 14:51:11Z

You are re instantiating the controller again which will re create the controller, in that case response is undefined, remove

 <div ng-controller="ctrl" ng-show="true"> //remove ng-controller
      <p>{{response}}</p>
 </div>

Working snippet :

(function(angular) {
      'use strict';
      angular.module('app', [])
        .controller('ctrl', ['$scope', function($scope) {
          $scope.init = function() {
            $scope.response = "press the button";
          }();

          $scope.data = {
            availableOptions: [{
              id: '1',
              name: 'num'
            }],
            selectedOption: {
              name: 'selected field'
            }
          };

          $scope.data2 = {
            availableOptions2: [{
                id: '0',
                name: 'null'
              }
            ],
            selectedOption2: {
              name: 'null'
            }
          };

          $scope.search = function() {
            $scope.response = "you pressed a button \\o/";
            alert($scope.response);
          };

          $scope.request = function(req) {
            $http(req).then(function() { /*successCallback*/ },
              function() { /*errorCallback*/ });
          };

        }]);
    })(window.angular);

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="//code.angularjs.org/1.7.3/angular.min.js"></script>
  <script src="analyzer.js"></script>
</head>

<body ng-app="app" ng-controller="ctrl" >
  <div ng-show="true">
    <!--class="ng-hide" is automatically added when ng-show="false"-->

    <!--SEARCH-->
    <form name="myForm">
      <label for="mySelect">Select a field:</label>
      <select name="mySelect" id="mySelect" ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption"></select>
      <br/>
      <div style="color:#757575">
        <input ng-model="query" type="text" size=45 class="form-control" placeholder="Search your {{data.selectedOption.name}} here..." />
        <div ng-show="true">
          or directly select your choice here...
          <select name="subSelect" id="subSelect" ng-options="option.name for option in data2.availableOptions2
        track by option.id" ng-model="data2.selectedOption2"></select>
          <br/>
          <button style="color:#757575" ng-click="search()">
            ...and go!</button>
        </div>
      </div>
    </form>

    <!--RESPONSE-->
    <div ng-show="true">
      <p>{{response}}</p>
    </div>
  </div>
</body>

</html>

You don't need to. Just move the ng-controller directive up to your body element.
thanks a lot! it works! I can't accept answer that fast apparently, but accepted in 10mn :)
In this case, yeah. I just didn't trace the markup all the way through before commenting. The key was removing the second ng-controller directive as you stated in your answer, though.

Collectives™ on Stack Overflow

AngularJS view not updated by the controller

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related