Trouble calling nested scope - angularjs

Question

So I'm playing around with AngularJS and wants to make two separate lists of skills. On list for my development skills and one for my design skills.
Problem is that I my data from the development nested scope is being rendered, but data from the design nested scope is not. What might I be doing wrong?
Here is my js:
var zkwskApp = angular.module('zkwskApp', []);
zkwskApp.controller('SkillsController', function($scope){
$scope.skills =
{ development: [
{ name: 'CSS3', level: 5, priority: 2},
{ name: 'HTML5', level: 5, priority: 1},
{ name: 'AngularJS', level: 1, priority: 3}
]
},
{ design: [
{ name: 'Design Thinking', level: 4, priority: 3}
]
},
{ management: [
{ name: 'SCRUM', level: 4, priority: 3}
]
};
});
And here is my HTML/template:
<ul class="small-12 medium-4 columns">
<li ng-repeat="skill in skills.development">
{{ skill.name }}
</li>
</ul>
<ul class="small-12 medium-4 columns">
<li ng-repeat="skill in skills.design">
{{ skill.name }}
</li>
</ul>

Answer 1

Try this
zkwskApp.controller('SkillsController', function($scope){
$scope.skills =
{ development: [
{ name: 'CSS3', level: 5, priority: 2},
{ name: 'HTML5', level: 5, priority: 1},
{ name: 'AngularJS', level: 1, priority: 3}
],
design: [
{ name: 'Design Thinking', level: 4, priority: 3}
],
management: [
{ name: 'SCRUM', level: 4, priority: 3}
]
};
});

Answer 2

Try this code.
var zkwskApp = angular.module('zkwskApp', []);
zkwskApp.controller('SkillsController', function($scope){
$scope.skills =
{ development: [
{ name: 'CSS3', level: 5, priority: 2},
{ name: 'HTML5', level: 5, priority: 1},
{ name: 'AngularJS', level: 1, priority: 3}
],
design: [
{ name: 'Design Thinking', level: 4, priority: 3}
],
management: [
{ name: 'SCRUM', level: 4, priority: 3}
]
};
});