Function called by ng-change is not updating the view after contents of variable changed

[Michael J. Mahony]

I have the following view:

<div class="row" ng-show="$parent.loggedin">

    <div class="col-sm-12 calselectrow">

        <div class="inner-addon left-addon">

            <span class="glyphicon glyphicon-calendar calicon"></span>

            <input type="text" id="calpick" ng-model="date" jdatepicker />

            <i class="glyphicon glyphicon-calendar calclick"></i>

            <a href="#" class="btn btn-primary flat-edge">>></a>

            <span class="bluedept">Department:</span>

            <select class="selectpicker deptpicker" id="deptSelect" selectpicker data-ng-model="department" ng-controller="CaseListCtrl" ng-change="getCalendar();">

                <option ng-repeat="department in departments">{{department.CourtRoom}}</option>

            </select>

        </div>

    </div>

</div>

<div class="row" ng-show="$parent.loggedin">

    <div ng-controller="CaseListCtrl">

        <div class="col-sm-8 col-sm-offset-2 caselist" ng-model="cases" ng-repeat-start="case in cases">

            <div class="sequence">

                <input type=text class="seq-box" size="1" value="{{case.sequence}}" />

            </div>

            <div class="casetitle">

                <span class="caselink">{{case.Case_Number}}</span>

                <a href="calendar" data-toggle="tooltip" data-placement="top" title="Calendar" class="btn btn-xs btn-danger calicon-view" tooltip>

                    <span class="glyphicon glyphicon-calendar"></span>

                </a>

                <a href="documents/{{case.Case_Number}}" data-toggle="tooltip" data-placement="top" title="Documents" class="btn btn-xs btn-danger calicon-view" tooltip>

                    <span class="glyphicon glyphicon-file"></span>

                </a>

                <a href="parties/{{case.Case_Number}}" data-toggle="tooltip" data-placement="top" title="Parties" class="btn btn-xs btn-danger calicon-view" tooltip>

                    <span class="glyphicon glyphicon-user"></span>

                </a>

                {{case.Case_Title}}

            </div>

        </div>

        <div class="col-sm-8 col-sm-offset-2 caselist-bottom">

            <div class="col-sm-9 col-sm-offset-1">

                <div class="hearing-time">{{case.Sched_Time}}&nbsp;{{case.AmPm}}</div>

                <div class="hearing-title">{{case.Event}}</div>

            </div> 

        </div>

        <div ng-repeat-end></div>

    </div>

</div>

On this view is a dropdown list. Upon initial load the calendar data for the courtroom is displayed correctly. Upon the change of the departments, I have an ngchange that calls getCalendar and that function fires. Here is that code:

JBenchApp.controller('CaseListCtrl', ['$scope', '$http', 

  function ($scope, $http) {

      // Case list stuff here

      

      $scope.getCalendar = function () {

          var e = document.getElementById("deptSelect");

          $scope.department = e.options[e.selectedIndex].text;

          console.log($scope.department);

          $http.get('http://10.34.34.46/BenchViewServices/api/Calendar/LA/' + $scope.department + '/08-27-2015').success(function (response) {

              //alert("First time: " + $scope.cases[1].Case_Title);

              $scope.cases = response;

              //$scope.cases = [{ "number" : "30-2013-0069378-PR-PL-CJC", "title": "Baumgartner - Probate", "sequence": "", "time": "9:00 am", "event": "Petition for Final Distribution", "event2": "" }];

              alert("Second time: " + $scope.cases[0].title);

          }).error(function (status, data) {

              console.log("error trapped");

          });

          //$scope.$apply();

      }

      

          $http.get('http://10.34.34.46/BenchViewServices/api/CourtDept/LA').success(function (response) {

              $scope.departments = response;

          });

          var defaultDepartment = '005';

          if ($scope.department == undefined) {

              $http.get('http://10.34.34.46/BenchViewServices/api/Calendar/LA/' + defaultDepartment + '/08-27-2015').success(function (response) {

                  $scope.cases = response;

              });

              $scope.department = defaultDepartment;

          }

  }]);

While I have confirmed that $scope.cases has new data, the view doesn't update. I have tried to do $scope.$appy() but get the error telling me that I cannot do that while digest is running. What is wrong here? Why won't the view change?

[Sander Elias]

Hi Michael,

I din’t read trough all your code. Probably you have a scoping issue. With that, I mean that the view uses a different scope then the update function. You can check that by doing a console.log($scope.$id) and an {{$id}} in the view where the problem is. My bet, you will get 2 different id’s.
The best thing you can do to solve this problem for once an all is switch to the controllerAs way of working. For details on that read trough the styleguide.

I hope this helps you a bit,
Regards
Sander

​

[Todd Branchflower]

Remember, the ng-controller directive creates a new child scope - that's what's causing your problems.  The CaseListCtrl attached to the <select> is setting variables on a different scope than the CaseListCtrl attached to the <div>.  To get the behavior you're looking for, you need to ensure that they both share the same scope.

[Michael J. Mahony]

Thanks Todd and Sander. The answer was to wrap the view in a div and add my ng-controller directive there so that there was just one instance of it for the entire thing. Once I did that it worked! Thanks for your help!

Michael J. Mahony

Personal Trainer

ISSA Certified

http://fastfitnessonline.com

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/AAvCHyBv1X4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.