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:

MultiSelect dropdown

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):

enter image description here

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?

@Shafeeq - I added a fiddle but I can't get the data to display there. — webdad3, Apr 01 '15 at 04:16
Some errors in fiddle, Anyway try this http://stackoverflow.com/questions/15342672/angularjs-using-a-service-as-a-model-ng-repeat-not-updating — Shafeeque, Apr 01 '15 at 05:38
@webdad3 I've fixed the errors in your fiddle. However there is nothing to display because `myService.cores` is not defined, please fix the code http://jsfiddle.net/6wwLw40j/ — floribon, Apr 03 '15 at 21:00
@floribon - I updated to http://jsfiddle.net/webdad3/6wwLw40j/2/ - see notes above. — webdad3, Apr 03 '15 at 21:02
Provide a fiddle with boostrap multiselect showing the problem — dting, Apr 03 '15 at 21:19
**JQuery** works outside the **Angular Digest Cycle**. Right after you make your call to your service to push a people object, call `$scope.$digest()` — Dave Alperovich, Apr 04 '15 at 03:44

score 1 · Accepted Answer · answered Apr 09 '15 at 10:45

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 enter image description here

  <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/

reloading my drop down when using a custom directive

1 Answers1

Linked