angular ui.select not rendering the items

Question

I am trying to implement the angular ui.select into my project using bootstrap theme but I have nothing but problems with it. I am passing a very simple object of few items in it. Here is object that I am trying to pass

 [Object { institution_type_id="1",  institution_type_description="Post"}, Object { institution_type_id="2",  institution_type_description="Security"}, Object { institution_type_id="3",  institution_type_description="Mutual Fund"}, Object { institution_type_id="4",  institution_type_description="Bank"}, Object { institution_type_id="5",  institution_type_description="Life insurance"}]

It renders fine using a regular select as seen below.

I want to use the angular ui.select instead and here is my setup.. I have included the following in my main page

<!-- Angular ui-select -->
    <link rel="stylesheet" href="../bower_components/ui-select/dist/select.min.css" type="text/css" />

<!-- Angular ui-select -->
<script src="../bower_components/ui-select/dist/select.min.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>

I want to use the bootstrap theme so of course bootstrap css is included as well

Now in my app.js, I have included the

ui.select

as dependency

Here is what I have in controller:

institutionService.getAllInstitutionTypes().then(function(data){       
        $scope.institutionTypes =  data;
    });

and here is my html looks like.

<div class="form-group required" ng-class="{ 'has-error': addEditInstitutionForm.institution_type_id.$invalid && addEditInstitutionForm.institution_type_id.$dirty}">
                <label for="institution_type_id" class="control-label col-xs-4">Institution Type</label>
                <div class="col-xs-8">
                    <ui-select ng-model="ctrl.country.selected" theme="bootstrap" style="width: 300px;" title="Choose Institution Type">
                        <ui-select-match placeholder="Select or search institutionType...">{{$select.selected.institution_type_description}}</ui-select-match>
                        <ui-select-choices repeat="type in institutionTypes">
                            <span ng-bind-html="type.institution_type_description"></span>
                            <small ng-bind-html="type.institution_type_id"></small>
                        </ui-select-choices>
                    </ui-select>
                </div>

when I load the page, it looks like the ui.select has rendered fine.. but there is nothing inside the dropdown as seen below.

what I see in console is lot of errors about $sce:unsafe as seen below.

Questions now are:

1. How can I fix these errors to render the dropdown correctly.
2. In the code snippet (http://angular-ui.github.io/ui-select/demo-basic.html), they are referencing $select on several places. Can someone please help me make understand it?
3. How can I validate the angular ui.select if I manage to fix the issue and understand it better enough to use it on my project.
4. Is there any better and simpler choice available than angular.ui select?

Thanks.

Answer 1

A couple of issues.

1. Need to inject ngSanitize, like this:

var app = angular.module('plunker', ['ui.select', 'ngSanitize']);

2. You are using the ControllerAs pattern in your ng-model, "ctrl.country.selected", but not when referencing your option array in the repeat attribute, "type in institutionTypes"

Controller:

var app = angular.module('plunker', ['ui.select', 'ngSanitize']);

app.controller('MainCtrl', function($scope) {

  var self = this;

  self.institutionTypes = [{
    institution_type_id: "1",
    institution_type_description: "Post"
  }, {
    institution_type_id: "2",
    institution_type_description: "Security"
  }, {
    institution_type_id: "3",
    institution_type_description: "Mutual Fund"
  }, {
    institution_type_id: "4",
    institution_type_description: "Bank"
  }, {
    institution_type_id: "5",
    institution_type_description: "Life insurance"
  }];

  self.country = {
    institution_type_id: "5",
    institution_type_description: "Life insurance"
  };

HTML:

      <ui-select ng-model="ctrl.country" theme="bootstrap">
        <ui-select-match placeholder="Select or search institutionType...">{{$select.selected.institution_type_description}}</ui-select-match>
        <ui-select-choices repeat="type in ctrl.institutionTypes | filter: $select.search ">
          <span ng-bind-html="type.institution_type_description | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>

});

Here's a working plunker