AngularJS/jQuery - Update Scope

Question

I am working on a legacy system that uses jQuery and had to add AngularJS for a particular feature, however im having issues updating the scope.

Basically, we have a dropdown and when you select an option, we're firing an Ajax call to get an array or objects. This array of objects is then being stored in a global variable, say var myObjs. Basically using the ng-repeat service from Angular, I need to loop through these and render a list.

I am new to Angular, so i'm not sure if this is the way to be done. What I am doing is setting the scope in this way:

$scope.myObjs= myObjs;

However, by doing so, the scope is not changing at all.

Can someone tell me how this can be done? I tried to look around but am finding it a bit hacky having a hybrid of AngularJS & jQuery on the same page.

EDIT : adding sample snippet. Basically on change of the dropdown im firing an ajax call, and store the response (which is an array of objects) in myObjs variable. Then I am trying to set the scope to the value of this variable. Regarding the way I am bootstrapping Angular, this is due to a limitation of the legacy system, which is over 8 years old.

 var myObjs = null; $(function() { $("#myHeader").on("change", "#mySelect", function() { // perform Ajax Call }); }); function ajaxCallback(data) { myObjs = data; } var myModule = angular.module("GetObjsModule", []); myModule.controller("MyController", function($scope) { $scope.objs = myObjs; }); angular.element(document).ready(function() { var myDiv = $("#myDiv"); angular.bootstrap(myDiv, ["GetObjsModule"]); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script> <div id="myHeader"> <select id="mySelect"> <option value="1">Value 1</option> <option value="2">Value 2</option> <option value="3">Value 3</option> </select> </div> <div id="myDiv"> <ul id="myList" ng-controller="MyController"> <li ng-repeat="x in objs"> <div class="accordionHeader"> {{x.name}} {{x.surname}}: {{x.tel}} </div> <div> <p> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> </div> </li> </ul> </div> 

Answer 1

It's pretty hard to come from jQuery and handle Angular's way of thinking.

Basically, to achieve what you want, you don't need jQuery at all.

<div ng-controller="MyController">
<div id="myHeader">
  <select id="mySelect" ng-change="yourUpdateFunction()">
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
  </select>
</div>

<div id="myDiv" ng-show="requestLoaded">
  <ul>
    <li ng-repeat="x in objs">
      <div>
        {{x.name}} {{x.surname}}: {{x.tel}}
      </div>
      <div>
        <p>
          Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum
          a velit eu ante scelerisque vulputate.
        </p>
      </div>
    </li>
  </ul>
</div>
</div>

So basically :

1. I wrapped your code into a div, which will contain your controller
2. I used ngChange directive to run an update function on your select element

Then, the JS part :

var myApp = angular.module("myApp", []);
myApp.controller("MyController", function($scope, $http) {
  $scope.objs;
  $scope.requestLoaded = false;
  $scope.yourUpdateFunction = function () {
     // Here you can run a $http request, based on value of select.
     $http.get('/someUrl').success(function(data, status, headers, config) {
       $scope.objs = data;
       $scope.requestLoaded = true;
  });
  }
});

In a nutshell : $scope.yourUpdateFunction is run on change on your select element (ngChange directive). It performs an asynchronous http request and set its response data to $scope.objs (so, from now, you can display it in the view). Then, the $scope.requestLoaded is used to show / hide your list. When the http request is loading, its false, the list is hidden, when it's done, the list is displayed, it's the directive ngShow .

It's a basic example, but this way you can achieve what you want.

Remember that AngularJS provides a two-way data binding, whenever you change something in the view, it gets updated in the controller, and vice versa.

Answer 2

Give an id for the ul <ul id="Mylist"> and add the below code in your callback function.

 angular.element(document.getElementById('Mylist')).scope().$apply(function(scope){
     scope.objs = myObjs;
});