AngularJS Dropdown Multiselect

Question

I'm trying to use angularjs for dropdown with multiple selection. Using 1 of them it works great, but if I need 2 dropdown in the same form, it doesn't get initialized. Here's an example http://jsfiddle.net/vUSPu/1221/, any kind soul could guide me on how to display 2 working dropdown? Thanks!

<div ng-app="myApp" ng-controller="AppCtrl">    
    <dropdown-multiselect pre-selected="member.roles" model="selected_items" options="roles"></dropdown-multiselect>


    <pre>selected roles = {{selected_items | json}}</pre>
</div>

<div ng-app="myApp2" ng-controller="AppCtrl2">    
    <dropdown-multiselect pre-selected="member.roles" model="selected_items" options="roles"></dropdown-multiselect>


var app = angular.module('myApp', ['app.directives']);

app.controller('AppCtrl', function($scope){                     
    $scope.roles = [
          {"id": 1, "name": "Manager", "assignable": true},
          {"id": 2, "name": "Developer", "assignable": true},
          {"id": 3, "name": "Reporter", "assignable": true}
    ];

    $scope.member = {roles: []};
    $scope.selected_items = [];
});

var app2 = angular.module('myApp2', ['app.directives']);

app2.controller('AppCtrl2', function($scope){                     
    $scope.roles = [
          {"id": 1, "name": "Manager", "assignable": true},
          {"id": 2, "name": "Developer", "assignable": true},
          {"id": 3, "name": "Reporter", "assignable": true}
    ];

    $scope.member = {roles: []};
    $scope.selected_items = [];
});

var app_directives = angular.module('app.directives', []);

app_directives.directive('dropdownMultiselect', function(){
   return {
       restrict: 'E',
       scope:{           
            model: '=',
            options: '=',
            pre_selected: '=preSelected'
       },
       template: "<div class='btn-group' data-ng-class='{open: open}'>"+
        "<button class='btn btn-small'>Select</button>"+
                "<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><span class='caret'></span></button>"+
                "<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" + 
                    "<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i>  Check All</a></li>" +
                    "<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i>  Uncheck All</a></li>" +                    
                    "<li class='divider'></li>" +
                    "<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>" +                                        
                "</ul>" +
            "</div>" ,
       controller: function($scope){

           $scope.openDropdown = function(){        
                    $scope.selected_items = [];
                    for(var i=0; i<$scope.pre_selected.length; i++){                        $scope.selected_items.push($scope.pre_selected[i].id);
                    }                                        
            };

            $scope.selectAll = function () {
                $scope.model = _.pluck($scope.options, 'id');
                console.log($scope.model);
            };            
            $scope.deselectAll = function() {
                $scope.model=[];
                console.log($scope.model);
            };
            $scope.setSelectedItem = function(){
                var id = this.option.id;
                if (_.contains($scope.model, id)) {
                    $scope.model = _.without($scope.model, id);
                } else {
                    $scope.model.push(id);
                }
                console.log($scope.model);
                return false;
            };
            $scope.isChecked = function (id) {                 
                if (_.contains($scope.model, id)) {
                    return 'icon-ok pull-right';
                }
                return false;
            };                                 
       }
   } 
});

Answer 1

Your JSFiddle example is slightly different from the code you provided. Which one is reflecting what you need?

JSFiddle solution

You are repeating the ng-app="myApp" so when the second code runs the AngularJS app instance for myApp has already been initialized. To solve that you can just remove that second initialization and put the second dropdown within the first (and only) ng-app scope.

Code on question solution

Assuming you want to have two different applications running on your document you need to start it manually as Angular will detect just the first one. Something like this:

<script>
  angular.bootstrap(document, ['myApp', 'myApp2']);
</script>