CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
Devesh Agrawal
Devesh Agrawal

Reputation: 9212

AngularJS push not updating the value in one div while updating in other

If I'm adding a new contact, its getting added in ul - li but not in select - option.

This is my program.

<!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 = ["[email protected]", "[email protected]"];

        $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>

What is wrong here?

Upvotes: 0

Views: 86

Answers (1)

Dylan
Dylan

Reputation: 4773

You are being Two controlling

plunker

just use one controller

<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>
     Email:<input type="text" ng-model="newcontact"/>
    <button ng-click="add()">Add</button>

Upvotes: 1

Related Questions