angularjs - ui-select f.selected is undefined -

i trying ui-select in app >.< giving me soo trouble. have followed examples , docs , cannot understand doing wrong here.

this html:

<div class="form-group">     <label class="control-label small">user roles</label>     <ui-select multiple ng-model="vm.form.roles" ng-disabled="disabled">         <ui-select-match placeholder="select roles">{{$item}}</ui-select-match>         <ui-select-choices repeat="role.id role in vm.roles | filter:$select.search">             {{role.name}}         </ui-select-choices>     </ui-select> </div> 

this controller:

angular.module('app.ctrls')     .controller('usersctrl', usersctrl);  // injecting dependencies usersctrl.$inject = ['$scope', '$state', '$stateparams', 'role', 'user'];  // controller function function usersctrl($scope, $state, $stateparams, $r, $u) {     var vm = this;      vm.form = {};     vm.form.roles = [];     vm.users = [];     vm.roles = [];      vm.messagebag = [];     vm.errorbag = [];      vm.getallroles = function() {         $r.get()             .success(function (response, status, headers, config) {                 vm.messagebag = response.messages;                 vm.roles = response.data;                 (var = 0; < vm.messagebag.length; i++) {                     $scope.createtoast('success', vm.messagebag[i]);                 }             })             .error(function (data, status, headers, config) {                 // clearing error bag                 vm.errorbag = [];                  (var prop in data) {                     if (data.hasownproperty(prop)) {                         data[prop].foreach(function (msg) {                             if (vm.errorbag.indexof(msg) == -1) {                                 vm.errorbag.push(msg);                             }                         });                     }                 }                  (var = 0; < vm.errorbag.length; i++) {                     $scope.createtoast('danger', vm.errorbag[i]);                 }             });     };       // controller initialiser     vm.init = function() {         //     };      // initialising controller     vm.init();  } 

this error in console whenever load page:

error: f.selected undefined f.getplaceholder@http://admin.xxxxxx.app/scripts/lazyload/select.min.js:7:9246 anonymous/fn@http://admin.xxxxxx.app/scripts/vendors-eb9a79cc0c.js line 14544 > function:2:258 expressioninputwatch@http://admin.xxxxxx.app/scripts/vendors-eb9a79cc0c.js:15673:31 $rootscopeprovider/this.$gethttp://admin.xxxxxx.app/scripts/vendors-eb9a79cc0c.js:17216:34 $rootscopeprovider/this.$gethttp://admin.xxxxxx.app/scripts/vendors-eb9a79cc0c.js:17491:13 tick@http://admin.xxxxxx.app/scripts/vendors-eb9a79cc0c.js:12451:25

vendors...cc0c.js (line 13647) error: f.selected undefined

i have no idea causing or how fix it. angularjs version 1.5.6 ui-router version 0.3.1

don't know if has code or conflict plugin.

don't see wrong it. tryed reproduce problem ui-select 18.1 here: reproduction maybe $item component (this worked me)

  <ui-select multiple ng-model="ctrl.address.selected" ng-disabled="disabled">  <ui-select-match placeholder="select person in list or search name/age...">{{$select.selected.name}}</ui-select-match> <ui-select-choices repeat="person in ctrl.people | filter: $select.search">   <div ng-bind-html="person.name | highlight: $select.search"></div>   <small>     email: {{person.email}}     age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>   </small> </ui-select-choices> 

based on error think cannot read vm.form.roles