title: Removing the Item from the dropdown once its added using angular
body: <p>HTML Code</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="plunker"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;AngularJS Plunker&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;script&gt;
      document.write("&lt;base href=\"" + document.location + "\" /&gt;");
    &lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="MainCtrl"&gt;
    &lt;h1&gt; NG options&lt;/h1&gt;
    &lt;form name="addUser"&gt;
      Application:
      &lt;select ng-model="filterAddUser.application" ng-init ="filterAddUser.application = 'STACK'" title="" ng-options="value as value for  (key , value) in applicationStatus"&gt;
      &lt;/select&gt;
      Roles:
      &lt;select ng-model="filterAddUser.role" title="" ng-init ="filterAddUser.role = 'R'" ng-options="role.value as role.param for role in roleStatus"&gt;
      &lt;/select&gt;
  
      &lt;button ng-click="addToCart()"&gt;AddItem&lt;/button&gt;
  
      &lt;div class="addCart"&gt;
        &lt;ul ng-repeat="item in items"&gt;
          &lt;li&gt;&lt;b&gt;Application:&lt;/b&gt; {{item.application}}&lt;/li&gt;
          &lt;li&gt;&lt;b&gt;Role:&lt;/b&gt; {{item.role}}&lt;/li&gt;
          &lt;li class="actionOptions"&gt;
            &lt;button ng-click="toggleSelected($index)"&gt;removeItem&lt;/button&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript Code</p>
  
  <pre><code>var app = angular.module('plunker', []);
  
  app.controller('MainCtrl', function($scope) {
  
    $scope.items = [];
  
    $scope.applicationStatus = {
      "TEST App": "TEST",
      "ABC App": "ABC",
      "TRY App": "TRY",
      "SIR App": "SIR",
      "LOPR App": "LOPR",
      "STACK App": "STACK"
    };
    $scope.roleStatus = [{
      "param": "Read",
      "value": "R"
    }, {
      "param": "Write",
      "value": "W"
    }, {
      "param": "Admin",
      "value": "A"
    }, {
      "param": "Super Approver",
      "value": "SA"
    }, {
      "param": "Supervisor",
      "value": "S"
    }];
  
  
    $scope.addToCart = function() {
  
      $scope.items.push({
        application: $scope.filterAddUser.application,
        role: $scope.filterAddUser.role
      });
      // Clear input fields after push
      $scope.filterAddUser['application'] = "";
      $scope.filterAddUser['role'] = "";
    }
  
    $scope.toggleSelected = function(index) {
      $scope.items.splice(index, 1);
    };
  
  });
  </code></pre>
  
  <p>All that i am trying to do is when i add the application to the cart that application needs to be removed from the dropdwon and also when i click on the remove item that needs to be pushed back to the cart i have included a plunker as well <a href="http://plnkr.co/edit/kSsetX?p=preview" rel="nofollow">http://plnkr.co/edit/kSsetX?p=preview</a>
  need help on the same.</p>