getJSON и угловая модель

Я застрял. Как-то я не могу заставить это работать. Я пытаюсь загрузить данные для веб-приложения из (по-прежнему локального) JSON файла. Раздел этого JSON содержит цвета и выглядит так:

{
  "colors" : {
    "1" : "yellow",
    "2" : "green",
    "3" : "red"
  },
  "stuff : {...}
}

У меня очень простой HTML файл с некоторыми заголовками. Сценарии загружаются в заголовок. Интересная часть выглядит так:

<ul  ng-controller="ColorController">
  <li ng-repeat="(key,value) in colors" value="{{key}}">
    {{key}}: {{value}}
  </li>
</ul>

Соответствующий Javascript:

var colors = {
    "1": "lyellow",
    "2": "lgreen",
    "3": "lred"
};

var app = angular.module('test', []);

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

    $scope.colors = colors;

    $.getJSON('data.json')
        .then(function(res){
            $scope.colors = res.colors;
        });
})

Сначала я попытался использовать локальную версию цветов, поэтому переменные цвета. Это сработало и произвело желаемый результат. Я попытался переключиться на локальный JSON. console.log показал правильный синтаксический анализ. На консоли отладки цвета и res.colors выглядят одинаково. Но список на странице не обновляется.

Я бы предположил, что это что-то со временем, но я не уверен. Может ли кто-нибудь указать мне в правильном направлении?