jquery - reloading my drop down when using a custom directive

Question

I am using the bootstrap-multiselect plugin to create multi-select drop downs.

Like this:

My dropdown is built like this:

<select id="ms{{chore.id}}" multiple="multiple" applyplugin>
    <option ng-repeat="familyMember in myService.people" value={{familyMember.name}}>{{familyMember.name}}</option>
</select>

I have a service:

myapp.service('myService', function () {
    var familyList = this;
    familyList.people = [
        {name: 'Jax', dob: '01/01/1974', cell: '3035551212', carrier: 'ATT', email: 'jax@soa.com', active: true},
        {name: 'Tara', dob: '03/01/1974', cell: '3035551313', carrier: 'SPRINT', email: 'tara@soa.com', active: false}];
    familyList.addPerson = function () {
        //alert(familyList.inputName + ', ' + familyList.inputBirthday + ', ' + familyList.inputCellPhone, + ', ' + familyList.inputCarrier + ', ' + familyList.inputEmail);
        familyList.people.push({
            name: familyList.inputName, dob: familyList.inputBirthday,
            cell: familyList.inputCellPhone, carrier: familyList.inputCarrier,
            email: familyList.inputEmail, active: true
        });

        familyList.inputName = '';
        familyList.inputDOB = '';
        familyList.inputCellPhone = '';
        familyList.inputCarrier = 0;
        familyList.inputEmail = '';
        familyList.active = true;
    };
});

I'm working on a custom directive that isn't working very well:

myapp.directive('applyplugin', function () {
    return {
        template: '<select id="ms{{chore.id}}" multiple="multiple"> <option ng-repeat="familyMember in myService.people" value={{familyMember.name}}>{{familyMember.name}}</option> </select>',
        link: function () {
        }
    }
});

The problem I'm trying to figure out is when I add a new family element into the familyList.people array I can see that it gets added in another section of the code, but my drop downs do not show the new element.

I really just want my drop downs to display the new element. Can you see any reason why this won't just append a new value to the option list?

If I add a new member of the family and then I add a new chore item then I get the updated listbox (but the original chore items do not get the newly added family members):

UPDATE!

I updated my Fiddle and you can see the family members being added to the list. However, when I apply the plugin I'm using (bootstrap-multiselect) it doesn't add the new items to the list when the plugin is active.

Any ideas?

Answer 1

For multiple selections with bootstrap and Angular, I would recommend AngularJS ui-select https://github.com/angular-ui/ui-select rather than reinventing the wheel.

See http://plnkr.co/edit/juqoNOt1z1Gb349XabQ2?p=preview

  <ui-select multiple ng-model="multipleDemo.colors" theme="select2">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in availableColors | filter:$select.search">
      {{color}}
    </ui-select-choices>
  </ui-select>

This is a part of a larger project with more UI elements: http://angular-ui.github.io/