jquery - reloading my drop down when using a custom directive -

i using bootstrap-multiselect plugin create multi-select drop downs.

like this:

my dropdown built 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 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 custom directive isn't working 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 figure out when add new family element familylist.people array can see gets added in section of code, drop downs not show new element.

i want drop downs display new element. can see reason why won't append new value option list?

if add new member of family , add new chore item updated listbox (but original chore items not newly added family members):

update!

i updated fiddle , can see family members being added list. however, when apply plugin i'm using (bootstrap-multiselect) doesn't add new items list when plugin active.

any ideas?

for multiple selections bootstrap , angular, recommend angularjs ui-select https://github.com/angular-ui/ui-select rather reinventing 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 part of larger project more ui elements: http://angular-ui.github.io/