title: Using Angularjs multiselect isteven
body: <p>Trying to incorporate <a href="http://isteven.github.io/angular-multi-select/#/demo-grouping" rel="nofollow noreferrer">Angularjs multiselect</a> into my project, however, whenever I try to pull the data from my mysql database, only the last record is being displayed.</p>
  
  <hr>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div isteven-multi-select
       input-model="allPersonnelGrouped"
       output-model="groupedOutput"
       button-label="icon name"
       item-label="icon name maker"
       tick-property="ticked"
       max-height="250px" 
       group-property="msGroup"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>angularjs</strong></p>
  
  <pre><code>$http.get('/messages/shifts').success(function(data) {
  
      $scope.groupedShifts = data;
  
  
      angular.forEach( $scope.groupedShifts, function( groupShift ) {
  
          $scope.allPersonnelGrouped = [
             { name: '&lt;strong&gt;All Shifts&lt;/strong&gt;', msGroup: true },
             { name: '&lt;strong&gt;' + groupShift.title + '&lt;/strong&gt;', msGroup: true },
             { icon: '', name: groupShift.personnel, maker: '(' + groupShift.email + ')', ticked: false },
             { msGroup: false },
             { msGroup: false }
          ];
  
      });
  
  });
  </code></pre>
  
  <p><strong>array of objects</strong></p>
  
  <pre><code>[
     {
        "id": 1,
        "title": "Shift 1",
        "email": "email@gmail.com",
        "personnel": "Johnny Depp"
     },
     {
        "id": 2,
        "title": "Shift 2",
        "email": "email2@gmail.com"
        "personnel": "Napoleon Bonaparte"
     }
  
  ]
  </code></pre>
  
  <hr>
  
  <p>In the example the last object in the array of objects above, only the last object is shown and I need all of them to be displayed.</p>
  
  <p>Essentially the output I am getting is</p>
  
  <p><img src="https://i.stack.imgur.com/thtmp.png" alt="enter image description here"></p>