I'm encountering an issue where adding a new contact is updating the ul-li list, but not the select-option list.
Here is the code snippet:
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello World, AngularJS - ViralPatel.net</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
function ContactController($scope)
{
$scope.contacts = ["<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cf4f5dcf9f1fdf5f0b2fff3f1">[email protected]</a>", "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9d1dcd5d5d6f9dcd4d8d0d597dad6d4">[email protected]</a>"];
$scope.add = function() {
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
}
</script>
</head>
<body>
<div ng-controller="ContactController">
<select ID="select-add-new-product-brand-name">
<option ng-model="selectedItem" ng-repeat="contact in contacts" value={{contact}}>{{ contact|uppercase }}</option>
</select>
</div>
<div ng-controller="ContactController">
Email:<input type="text" ng-model="newcontact"/>
<button ng-click="add()">Add</button>
<ul>
<li ng-repeat="contact in contacts"> {{ contact }} </li>
</ul>
</div>
</body>
</html>
I need help identifying the issue here. Any suggestions?