Angular UI select not displaying

Question

I am currently using ui-select (https://github.com/angular-ui/ui-select) for dropdowns. I have included select.js and select.css in my index.html file. I have also installed angular-sanitize through bower.

This is what my controller looks like :

use strict';

angular.module('myApp.home', [  'ui.select',     'ngSanitize']).controller('ScheduleCtrl', ScheduleCtrl);
ScheduleCtrl['$inject'] = [ '$stateParams', '$state' ];
function ScheduleCtrl($stateParams, $state) {
    var vm=this;

    vm.itemArray = [
                    {id: 1, name: 'first'},
                    {id: 2, name: 'second'},
                    {id: 3, name: 'third'},
                    {id: 4, name: 'fourth'},
                    {id: 5, name: 'fifth'},
                ];

    vm.scheduleEvents = [{
        id:1,
        name:'Event1'
    },
    {
        id:2,
        name:'Event2'
    }];

}

And my view contains :

<ui-select ng-model="selectedItem">
    <ui-select-match>
        <span ng-bind="$select.selected.name"></span>
    </ui-select-match>
    <ui-select-choices repeat="item in (vm.itemArray | filter: $select.search) track by item.id">
        <span ng-bind="item.name"></span>
    </ui-select-choices>
</ui-select>

However, my view is blank and it does not seem to be hitting the ui-select directive.

Eblis

I believe a plunkr/jsfiddle would be great for further debugging, comparing the steps you've taken to the demo: plnkr.co/edit/juqoNOt1z1Gb349XabQ2?p=preview it seems that it should work. Do you have any errors in the console? – Myra

I'm working on putting together a plnkr now. No errors in the console. It's just not displaying anything @erikSvedin – Eblis

Did you try to do {{item.name}} instead of <span ng-bind="item.name"></span> inside ui-select-choices tag? – Plod

@ViníciusFagundes yes I did. I'm not even seeing the outline of a dropdown menu though. It's just empty. The HTML is in the page source but it's not displaying anything. I think the issue is with how I'm loading in the module. – Eblis

in which browser did you use/tried? – Rapt

@Rapt using Chrome – Eblis

have you included bootstrap css ? If you don't it just displays the dot of a li. If you click on it you can see it is working but you have to have bootstrap.css also to appear as an input – Rapt

Answer 1

Remove ( and ).

<ui-select-choices repeat="item in vm.itemArray | filter: $select.search track by item.id">
    <span ng-bind="item.name"></span>
</ui-select-choices>

See running on plunker.

Another thing you can test, comment this line:

//ScheduleCtrl['$inject'] = [ '$stateParams', '$state' ];

I didn't understand what it is doing, but with it the example on plunker doesn't work.

Deoxygenate

I stil don't even have a dropdown visible on the screen. The problem I believe is how I am loading the directive in or something. I don't think it's seeing it. When I create a basic example in a plnkr it's fine, – Eblis

How are you calling you controller on that page? – Plod

Controller is being called from the routes: .state('home.schedule', { url : "/schedule", templateUrl : "home/schedule.html", controller : "ScheduleCtrl", controllerAs : 'vm' }) – Eblis

I also took out the inject and still nothing is displaying and no errors. I put breakpoints in the select.js file and they aren't being hit. So it's definitely the module not being loaded – Eblis

You should be able to spot an error like 404 if the path is incorrect, if not there might be some error with type="" when importing the script. – Myra

@ErikSvedin the select.js and select.css files are being loaded in to the app correctly. It is how it is being injected into the module where the issue lies – Eblis

Do you have another entity(controller, service or w/e) overriding your "myApp.home" declaration? I.e does more than one declaration with the array of dependencies exist? – Myra

@ErikSvedin that was a great point! But myApp.home is only declared as a module in app.js and only has dependencies in that controller – Eblis

I'm sorry I'm out of ideas, double check everything. Make everything 100% as it is on plunkr as you said its working there? I guess if you're able to zip your project I could look at it. Otherwise just keep checking for typos I guess. Probably is something silly, like it usually is – Myra

ng-app="yourApp" on body tag? Check on browser console if all assets are being loaded. If it isn't the error only with the full code we can help... like @ErikSvedin said. – Plod