Angular ui-select $injector:unpr error

Question

I'm trying to use ui-select module in my system, I injected ui-module and ngSanitize

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

And included their JS files in HTML:

<link rel="stylesheet" href="/local/mentoring/assets/ui-select/dist/select.min.css">
<script src="/local/mentoring/assets/ui-select/dist/select.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>

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

My JS:

angular.module('app')
        .controller('ctrl', ['$scope', function ($scope){
            $scope.itemArray = [
                {id: 1, name: 'first'},
                {id: 2, name: 'second'},
                {id: 3, name: 'third'},
                {id: 4, name: 'fourth'},
                {id: 5, name: 'fifth'},
            ];

            $scope.selectedItem = $scope.itemArray[0];
        }]);

But when I'm using the directive, is reporting following error to me:

What I wrong in my code?

Update 1:

I changed angular.min.js to angular.js, then my console is reporting following error:

first troubleshooting step: use `angular.js` instead of `angular.min.js` to get actual error messages. — Claies, Apr 13 '17 at 16:31
@Claies Oh! thanks! I changed `angular.min.js` to `angular.min.js`, then it's reporting Unknown provider for `uiSelectHeaderDirective` and `uiSelectFooterDirective` — Lai32290, Apr 13 '17 at 16:41

score 1 · Accepted Answer · answered Apr 13 '17 at 16:48

Try to update the ui.select version. Here is a working solution.

DEMO

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

myApp.controller('Controller', ['$scope',
  function($scope) {
    $scope.itemArray = [{
      id: 1,
      name: 'first'
    }, {
      id: 2,
      name: 'second'
    }, {
      id: 3,
      name: 'third'
    }, {
      id: 4,
      name: 'fourth'
    }, {
      id: 5,
      name: 'fifth'
    }, ];

    $scope.selectedItem = $scope.itemArray[0];
  }
]);

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  <script src="https://code.angularjs.org/1.4.0-beta.6/angular-sanitize.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="myApp">
  <div ng-controller="Controller">
    <ui-select ng-model="selected.value">
      <ui-select-match>
        <span ng-bind="$select.selected.name"></span>
      </ui-select-match>
      <ui-select-choices repeat="item in (itemArray | filter: $select.search) track by item.id">
        <span ng-bind="item.name"></span>
      </ui-select-choices>
    </ui-select>
  </div>
</body>
</html>

I can't believe!! the problem is version of `ui-select`, but I don't know why, because I just download it right now. Anyway, thank you a lot!! — Lai32290, Apr 13 '17 at 17:23

Angular ui-select $injector:unpr error

1 Answers1