ng-repeat не работает, когда я использую константу

Question

Im new at AngularJS.

Мне нужно создать выпадающее меню из констант. Вот мой код:

.constant('COLORS', 
    [ 
     {red: '#ff0000'}, 
     {green: '#00ff00'}, 
     {blue: '#0000ff'} 
    ] 
).directive('colorSetter', ['COLORS', function (COLORS) { 
    return { 
     scope: { 
      user: "=" 
     }, 
     restrict: 'E', 
     // templateUrl: 'colorSetterDirective.html' 
     template: '<select name="mySelect" ng-model="colorModel">' + 
     '<option ng-repeat="(key,value) in COLORS">{{c.key}} - {{c.value}}</option>' + 
     '</select>' 
    } 

Затем он создает выпадающее меню, но нет ничего показать. Пусто. Я пробовал все, но это не сработает. Я использовал эту линию тоже, но до сих пор не работает:

<option ng-repeat="c in COLORS">{{c}}</option> 

ПИК: empty selectors

index.html:

.... 
<td><color-setter ng-model="colors" user="x"></color-setter></td> 

Спасибо ребята!

Edit: app.js

var app = angular.module("testProject", ['ui.router', 'ngAnimate', 'ngSanitize']) 
.service('userService', function ($http) { 
    this.getUsers = function() { 
     return $http.get('users.json'); 
    }; 
}) 
.controller('testProjectCtrl',function ($scope, userService, COLORS) { 
    function GetAllUsers() { 
     var getUsersData = userService.getUsers(); 

     getUsersData.then(function (user) { 
      $scope.users = user.data; 
     }, function() { 
      alert('Error in getting user records'); 
     }); 
    } 

    function init() { 
     $scope.sortType = "username"; 
     $scope.sortReverse = false; 
     $scope.limitNumber = 10; 
     $scope.colors = COLORS; 

    } 

    $scope.setDb = function (darab) { 
     $scope.limitNumber = darab; 
    } 
    init(); 
    GetAllUsers(); 

}).constant('COLORS', 
    [ 
     {red: '#ff0000'}, 
     {green: '#00ff00'}, 
     {blue: '#0000ff'} 
    ] 
).directive('colorSetter', ['COLORS', function (COLORS) { 
    return { 
     scope: { 
      user: "=" 
     }, 
     restrict: 'E', 
     // templateUrl: 'colorSetterDirective.html' 
     template: '<select name="mySelect" ng-model="colorModel">' + 
     '<option ng-repeat="c in COLORS">{{c}}</option>' + 
     '</select>' 
    } 


}]); 

Answer 1

Вы должны вводить константы в контроллер $ объема

.directive('colorSetter', ['COLORS', function (COLORS) { 
    return { 
     scope: { 
      user: "=" 
     }, 
     restrict: 'E', 
     templateUrl: 'colorSetterDirective.html', 
     controller:function($scope){ 
      $scope.colors = COLORS; 
     } 
    } 
}]); 

colorSetterDirective.html:

<select name="mySelect" ng-model="colorModel"> 
    <option ng-repeat="c in colors">{{c}}</option> 
</select>