ui-select f.selected is undefined
<p>I am trying to ui-select in my app >.&lt; It is giving me soo much trouble.  I have followed the examples and docs and I cannot understand what I am doing wrong here.</p>

<p>This is my html:</p>

<pre><code>&lt;div class="form-group"&gt;
    &lt;label class="control-label small"&gt;User Roles&lt;/label&gt;
    &lt;ui-select multiple ng-model="vm.form.roles" ng-disabled="disabled"&gt;
        &lt;ui-select-match placeholder="Select roles"&gt;{{$item}}&lt;/ui-select-match&gt;
        &lt;ui-select-choices repeat="role.id as role in vm.roles | filter:$select.search"&gt;
            {{role.name}}
        &lt;/ui-select-choices&gt;
    &lt;/ui-select&gt;
&lt;/div&gt;
</code></pre>

<p>This is my controller:</p>

<pre><code>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;
                for (var i = 0; i &lt; vm.messageBag.length; i++) {
                    $scope.createToast('success', vm.messageBag[i]);
                }
            })
            .error(function (data, status, headers, config) {
                // Clearing Error Bag
                vm.errorBag = [];

                for (var prop in data) {
                    if (data.hasOwnProperty(prop)) {
                        data[prop].forEach(function (msg) {
                            if (vm.errorBag.indexOf(msg) == -1) {
                                vm.errorBag.push(msg);
                            }
                        });
                    }
                }

                for (var i = 0; i &lt; vm.errorBag.length; i++) {
                    $scope.createToast('danger', vm.errorBag[i]);
                }
            });
    };


    // Controller Initialiser
    vm.init = function() {
        //
    };

    // Initialising Controller
    vm.init();

}
</code></pre>

<p>This is the error I get in my console whenever I load the page:</p>

<blockquote>
  <p>Error: f.selected is undefined
  f.getPlaceholder@<a href="http://admin.xxxxxx.app/scripts/lazyload/select.min.js:7:9246" rel="nofollow">http://admin.xxxxxx.app/scripts/lazyload/select.min.js:7:9246</a>
  anonymous/fn@<a href="http://admin.xxxxxx.app/scripts/vendors-eb9a79cc0c.js" rel="nofollow">http://admin.xxxxxx.app/scripts/vendors-eb9a79cc0c.js</a>
  line 14544 > Function:2:258
  expressionInputWatch@<a href="http://admin.xxxxxx.app/scripts/vendors-eb9a79cc0c.js:15673:31" rel="nofollow">http://admin.xxxxxx.app/scripts/vendors-eb9a79cc0c.js:15673:31</a>
  $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@<a href="http://admin.xxxxxx.app/scripts/vendors-eb9a79cc0c.js:12451:25" rel="nofollow">http://admin.xxxxxx.app/scripts/vendors-eb9a79cc0c.js:12451:25</a>   </p>
  
  <p>vendors...cc0c.js (line 13647) Error: f.selected is undefined</p>
</blockquote>

<p>I have no idea what is causing this or how to fix it.
My angularjs version is 1.5.6
ui-router version is 0.3.1</p>

<p>Don't know if it has to do with my code or conflict with another plugin.</p>