W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">×</span></li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Add</button>
  <p>{{errortext}}</p>
</div>

<p>Try to add the same item twice, and you will get an error message.</p>

</body>
</html>

​x
 
<!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script><body>​<script>var app = angular.module("myShoppingList", []); app.controller("myCtrl", function($scope) {    $scope.products = ["Milk", "Bread", "Cheese"];    $scope.addItem = function () {        $scope.errortext = "";        if (!$scope.addMe) {return;}                if ($scope.products.indexOf($scope.addMe) == -1) {            $scope.products.push($scope.addMe);        } else {            $scope.errortext = "The item is already in your shopping list.";        }    }    $scope.removeItem = function (x) {        $scope.errortext = "";            $scope.products.splice(x, 1);    }});</script>​<div ng-app="myShoppingList" ng-controller="myCtrl">  <ul>    <li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">×</span></li>  </ul>  <input ng-model="addMe">  <button ng-click="addItem()">Add</button>  <p>{{errortext}}</p></div>​<p>Try to add the same item twice, and you will get an error message.</p>​</body></html>​