title: AngularJS: Populating checkbox list with two JSON arrays and initially checked some items from one array
body: <p>In my AngularJS application there is a checkbox list. This list represents some interests of a user. The user can select one or more items from the list.
  <strong>HTML</strong></p>
  
  <pre><code>&lt;html&gt;
     &lt;head&gt;
        &lt;title&gt;User Interests&lt;/title&gt;
        &lt;script src="../scripts/angular.min.js"&gt;&lt;/script&gt;
        &lt;script src="../scripts/userinterests.js"&gt;&lt;/script&gt;
        &lt;script src="//code.jquery.com/jquery-1.12.0.min.js"&gt;&lt;/script&gt;
        &lt;script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;div ng-app="userinterests"&gt;
           &lt;form ng-submit="submit()" ng-controller="userinterestsCtrl"&gt;
              &lt;div ng-repeat="userinterest in userinterests"&gt;
                 &lt;input type="checkbox" checkbox-group /&gt; &lt;label&gt;{{userinterest.interestKey}}&lt;/label&gt;
              &lt;/div&gt;
              &lt;input type="submit" id="submit" value="Submit" /&gt;
           &lt;/form&gt;
        &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In my javascript file first I get a list from a backend function, this list contains all the interests. If this backend call success then I call another function to get the already selected items from that user, this returns another list which contains the interests which are already selected by the user. Now I have two lists (list of all the interests &amp; list of already selected interests by the user). Now I want to display a checkbox list with all the interests but I want to check the items which are already selected by the customer.</p>
  
  <p>This is my javascript looks like</p>
  
  <pre><code>var app = angular.module('userinterests', []);
  
  app.controller('userinterestsCtrl', function($scope, $http) {
  // Get full interests list
  $http({
      method : 'POST',
      url : './test/userInterests',
      headers : {
          'Content-Type' : 'application/json'
      }
  }).success(function(response) {
      console.log('response=&gt;' + response);
      $scope.interests_array = [];
      $scope.userinterests = response;
      console.log($scope.userinterests);
  
      // Get already selected interests
      $http({
          method : 'POST',
          url : './test/savedInterests',
          headers : {
              'Content-Type' : 'application/json'
          },
          params : {
              user_email : localStorage.getItem("user_email")
          }
      }).success(function(response) {
          console.log('response=&gt;' + response);
          $scope.savedinterests = response;
          console.log(response);
      }).error(function(response, status, headers, config) {
          console.log('failure');
      });
  
  }).error(function(response, status, headers, config) {
      console.log("failure");
  });
  
  $scope.submit = function() {
      console.log('Submiting...');
      console.log($scope.interests_array.join(", "));
  
      var user_email = localStorage.getItem("user_email");
      var preferences = "[" + $scope.interests_array.join(", ") + "]";
  
      console.log('preferences=&gt;' + preferences);
  
      $http({
          method : 'POST',
          url : './test/setUserInterests',
          headers : {
              'Content-Type' : 'application/json'
          },
          params : {
              user_email : user_email,
              preferences : preferences
          }
      }).success(function(response) {
          console.log('response=&gt;' + response);
  
      }).error(function(response, status, headers, config) {
          console.log('failure');
      });
  };
  
  }).directive(
      "checkboxGroup",
      function() {
          return {
              restrict : "A",
              link : function(scope, elem, attrs) {
                  // Determine initial checked boxes
                  if (scope.interests_array.indexOf(scope.userinterest.interestKey) !== -1) {
                      elem[0].checked = true;
                  }                   
  
                  // Update array on click
                  elem.bind('click', function() {
                      var index = scope.interests_array.indexOf(scope.userinterest.interestKey);
                      // Add if checked
                      if (elem[0].checked) {
                          if (index === -1)
                              scope.interests_array.push(scope.userinterest.interestKey);
                      }
                      // Remove if unchecked
                      else {
                          if (index !== -1)
                              scope.interests_array.splice(index, 1);
                      }
                      // Sort and update DOM display
                      // scope.$apply(scope.array.sort(function(a, b) {
                      // return a - b
                      // }));
                  });
              }
          }
      });
  </code></pre>
  
  <p><strong>sample data</strong></p>
  
  <pre><code>        $scope.userinterests = [{
          "key": "test1",
          "score": 1.0
        }, {
          "key": "test2",
          "score": 1.0
        }, {
          "key": "test3",
          "score": 1.0
        }, {
          "key": "test4",
          "score": 1.0
        }, {
          "key": "test5",
          "score": 1.0
        }, {
          "key": "test6",
          "score": 1.0
        }, {
          "key": "test7",
          "score": 1.0
        }, {
          "key": "test8",
          "score": 1.0
        }, {
          "key": "test9",
          "score": 1.0
        }, {
          "key": "test10",
          "score": 1.0
        }, {
          "key": "test11",
          "score": 1.0
        }];
  
        var selectedInterests = [{
          "key": "test1",
          "score": 1.0
        }, {
          "key": "test2",
          "score": 1.0
        }, {
          "key": "test3",
          "score": 1.0
        }];
  </code></pre>
  
  <p>I would be much appreciates if anyone could be so kind enough to help me to achieve this.</p>
  
  <p>Thank You</p>