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 On Wed, Sep 2, 2015 at 9:02 AM, Todd Branchflower < [email protected]> wrote: > 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. > > > On Tuesday, September 1, 2015 at 2:50:36 PM UTC-6, Michael J. Mahony wrote: >> >> 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}} {{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? >> > -- > 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 > [email protected]. > To post to this group, send email to [email protected]. > Visit this group at http://groups.google.com/group/angular. > For more options, visit https://groups.google.com/d/optout. > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
