Angular ui-select error: 404 (Failed to load template)

Question

Anyone having issue using angular-ui-select?

Getting this error

GET http://localhost/select2/select.tpl.html 404 (Not Found) angular.js:8539
Error: [$compile:tpload] Failed to load template: select2/select.tpl.html

From the documentation - i just needed to reference select.js and select.css

Answer 1

Try using the select.css and select.js files from the /dist directory instead of the files from the /src directory.

Answer 2

You need templates as well - look into src folder. There are 3 themes.

When you include select into your page you specify which one you want to use:

<ui-select ng-model="boo.selected" theme="resources/templates/select2" ng-disabled="disabled">

Here above I put path to templates

Answer 3

You get this error because the template in the error message is not loaded into the templateCache. You are probably using a version of select.js that doesn't contain the templates.

Also you will find that not every template design has been made for every select type. Eg. there are no Selectize templates for multiselect, that can also cause similar errors.

If you take a look at the end of the select.js source you will see how you can load the templates or even define your own template.

In your case:

angular.module("ui.select").run(["$templateCache", function($templateCache){
    $templateCache.put("select2/select.tpl.html","<div class=\"ui-select-container select2 select2-container\" ng-class=\"{\'select2-container-active select2-dropdown-open open\': $select.open,\n \'select2-container-disabled\': $select.disabled,\n \'select2-container-active\': $select.focus, \n \'select2-allowclear\': $select.allowClear && !$select.isEmpty()}\"><div class=\"ui-select-match\"></div><div class=\"select2-drop select2-with-searchbox select2-drop-active\" ng-class=\"{\'select2-display-none\': !$select.open}\"><div class=\"select2-search\" ng-show=\"$select.searchEnabled\"><input type=\"text\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" class=\"ui-select-search select2-input\" ng-model=\"$select.search\"></div><div class=\"ui-select-choices\"></div></div></div>");
}]);