I'm attempting to input a color name and if the color isn't already in the list, it should be added and the li element should also display that color. I can't figure out what's going wrong here.
<!DOCTYPE html>
<html>
<head></head>
<body ng-app="colors">
<div ng-controller="mainCtrl as ctrl">
<ul ng-repeat="color in ctrl.colors">
<li ng-bind="color.label" ng-style="{color:color.label}">
</ul>
<input type="text" ng-model="ctrl.colordisp"></input>
{{ctrl.colordisp}}
</div>
<button type="button" ng-click="ctrl.checkColor()">submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
angular.module("colors",[])
.controller("mainCtrl",[function(){
var self=this;
self.colors=[
{label:"red"},
{label:"blue"},
{label:"green"}
];
self.colordisp="red";
self.checkColor=function(){
angular.forEach(self.colors,function(c){
if(c.label!==self.colordisp){
self.colors.push("label:"+self.colordisp);
}
});
};
}]);
</script>
</body>
</html>