In this example firstly we can add the color by calling addColor() create options of added colors.Div element will show if we select the added the color.

<!DOCTYPE html> <html xmlns=""> <head> <title>Welcome to LearnKode - A code learning platform</title> <script src=""></script> <link rel="stylesheet" href=""> </head> <body ng-app="Example"> <div ng-controller="ExampleController"> <div class="container"> <b>Add Color</b> <input type="color" ng-model="colorName" class="form-control" /><br /> <input type="button" ng-disabled="colorName==null || colorName==''" ng-click="addColor(colorName)" class="btn btn-primary" value="Add Color" /><br /><br /> <span ng-show="ColorArrs.length>0"><b>Choose Color</b><select ng-model="selectedColor" class="form-control" ng-options="ColorArr for ColorArr in ColorArrs"></select><br /></span> <div style="width:200px;height:200px;background-color:{{selectedColor}}"></div> </div> </div> <script> var app = angular.module("Example", []); app.controller('ExampleController', ['$scope', function ($scope) { $scope.ColorArrs = []; $scope.addColor = function (colorName) { $scope.ColorArrs.push(colorName); $scope.colorName = null; } }]); </script> </body> </html>