title: How can we make dependent select boxes in select2 with angular?
body: <p>I am using select2 with angularjs for select boxes in my application. There is one parent select box where user can select multiple groups and there are many other child select boxes with the same group selection feature.</p>
  
  <blockquote>
    <p>My problem is how to restrict child group search options according to
    parent group selected option. i.e. say if parent groups are Group1,
    Group2, Group3 then the child group search box should avail the
    options selected in parent groups only.</p>
  </blockquote>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body ng-app="myModule"&gt;
    &lt;div ng-controller="myCtrl"&gt;
      &lt;div ng-repeat="activity in activities"&gt;
          &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
          &lt;div&gt;
            Parent Group:
            &lt;select multiple class="full-width" ui-select2="groupSetup" ng-model="activity.act_group_id" ng-init="activity.act_group_id=split_custom(activity.act_group_id,',',1)" data-placeholder="Select Group"&gt;
              &lt;option ng-repeat="group in groups | orderBy:'text'" value="{{group.id}}"&gt;{{group.text}}&lt;/option&gt;
            &lt;/select&gt;
            &lt;p&gt;selected parent groups {{activity.act_group_id}}&lt;/p&gt;
          &lt;/div&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;div&gt;
            Child Group:
            &lt;select multiple class="full-width" ui-select2="groupSetup" ng-model="activity.act_auto_approve_group" ng-init="activity.act_auto_approve_group=split_custom(activity.act_auto_approve_group,',',1)" data-placeholder="Select Group"&gt;
              &lt;option ng-repeat="group in groups | orderBy:'text'" value="{{group.id}}"&gt;{{group.text}}&lt;/option&gt;
            &lt;/select&gt;
            &lt;p&gt;selected child group {{activity.act_auto_approve_group}}&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>var activityModule = angular.module('myModule', ['ui']);
  
  activityModule.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {
  
    $scope.activities = [{"act_name": "activity1", "act_group_id": "62,68", "act_auto_approve_group": "62"}];
  
    $scope.groups = [{"text": "Group1", "id": 2}, {"text": "Group2", "id": 62}, {"text": "Group3", "id": 68}, {"text": "Group4", "id": 74}, {"text": "Group5", "id": 98}, {"text": "Group6", "id": 104}, {"text": "Group7", "id": 107}, {"text": "Group8", "id": 139}, {"text": "Group9", "id": 149}, {"text": "Group10", "id": 154}];
    $scope.groupSetup = {
      multiple: true,
      formatSearching: 'Searching the group...',
      formatNoMatches: 'No group found'
    };
  
  
    // custom function to convert string into attay (string arra or integer array)
    $scope.split_custom = function(string, spliter, is_integer) {
      $scope.ret_arr = string.split(spliter); // convert string into array
      if (is_integer==1)
        $scope.ret_arr = $scope.ret_arr.map(Number); // convert string array into integer array
      return $scope.ret_arr;
    };
  
  }]);
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/dpX7jNkEgRoPyRZpJV92?p=preview" rel="nofollow">http://plnkr.co/edit/dpX7jNkEgRoPyRZpJV92?p=preview</a></p>