title: Can't remove element from scope array AngularJS
body: <p>I've got a couple views via <code>ui-router</code> and have a scope that I'm storing some input values in. The user can either enter information in one view and go to the next step or they can skip that step (and remove any entered data in the scope) and go to the next step.</p>
  
  <p>I've tried many ways of trying to remove the element via $scope function and splice but I keep getting a TypeError - I know something is missing, but I can't seem to pinpoint it. I'd appreciate any help I can get!</p>
  
  <p><strong>Error:</strong></p>
  
  <pre><code>TypeError: undefined is not a function
  at Scope.$scope.remove (http://localhost:9000/scripts/app.js:27:32)
  at http://localhost:9000/bower_components/angular/angular.js:10567:21
  at http://localhost:9000/bower_components/angular/angular.js:18627:17
  at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12412:28)
  at Scope.$apply (http://localhost:9000/bower_components/angular/angular.js:12510:23)
  at HTMLButtonElement.&lt;anonymous&gt; (http://localhost:9000/bower_components/angular/angular.js:18626:21)
  at http://localhost:9000/bower_components/angular/angular.js:2780:10
  at forEach (http://localhost:9000/bower_components/angular/angular.js:330:20)
  at HTMLButtonElement.eventHandler (http://localhost:9000/bower_components/angular/angular.js:2779:5) angular.js:9778
      (anonymous function) angular.js:9778
      (anonymous function) angular.js:7216
      Scope.$apply angular.js:12512
      (anonymous function) angular.js:18626
      (anonymous function) angular.js:2780
      forEach angular.js:330
      eventHandler angular.js:2779
  </code></pre>
  
  <p><strong>Index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html class="no-js"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;meta name="description" content=""&gt;
  &lt;meta name="viewport" content="width=device-width"&gt;
  &lt;!-- Place favicon.ico and apple-touch-icon.png in the root directory --&gt;
  &lt;!-- build:css(.) styles/vendor.css --&gt;
  &lt;!-- bower:css --&gt;
  &lt;!-- endbower --&gt;
  &lt;!-- endbuild --&gt;
  &lt;!-- build:css(.tmp) styles/main.css --&gt;
  &lt;link rel="stylesheet" href="styles/main.css"&gt;
  &lt;!-- endbuild --&gt;
  &lt;/head&gt;
  &lt;body ng-app="testappApp"&gt;
  
  &lt;!-- Add your site or application content here --&gt;
  &lt;div class="container"&gt;
      &lt;div ui-view&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;!-- build:js(.) scripts/oldieshim.js --&gt;
  &lt;!--[if lt IE 9]&gt;
  &lt;script src="bower_components/es5-shim/es5-shim.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/json3/lib/json3.min.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  &lt;!-- endbuild --&gt;
  
  &lt;!-- build:js(.) scripts/vendor.js --&gt;
  &lt;!-- bower:js --&gt;
  &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/json3/lib/json3.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular-ui-router/release/angular-ui-router.js"&gt;&lt;/script&gt;
  &lt;!-- endbower --&gt;
  &lt;!-- endbuild --&gt;
  
      &lt;!-- build:js({.tmp,app}) scripts/scripts.js --&gt;
      &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/controllers/main.js"&gt;&lt;/script&gt;
      &lt;!-- endbuild --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>page1.html</strong></p>
  
  <pre><code>&lt;div class="jumbotron"&gt;
  &lt;h1&gt;Page 1&lt;/h1&gt;
  &lt;input type="text" ng-model="datas.veggie" placeholder="favorite veggie"&gt;
  &lt;a ui-sref="two"&gt;
  Next
  &lt;/a&gt;
  &lt;button data-ng-click="remove(datas.veggie)"&gt;
  Skip
  &lt;/button&gt;
  &lt;pre&gt;
  {{datas}}
  &lt;/pre&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>page2.html</strong></p>
  
  <pre><code>&lt;div class="jumbotron"&gt;
  &lt;h1&gt;Page 2&lt;/h1&gt;
  &lt;input type="text" ng-model="datas.color" placeholder="favorite color"&gt;
  &lt;a ui-sref="one"&gt;
  Back
  &lt;/a&gt;
  &lt;button data-ng-click="remove(datas.color)"&gt;
  Skip
  &lt;/button&gt;
  &lt;pre&gt;
  {{datas}}
  &lt;/pre&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>'use strict';
  
  angular
    .module('testappApp', ['ui.router']).config(function($stateProvider, $urlRouterProvider){
      $stateProvider.state('one', {
          url: '/one',
          templateUrl: 'views/page1.html',
          controller: 'mainController'
      }).state('two', {
          url: '/two',
          templateUrl: 'views/page2.html'
      });
      $urlRouterProvider.otherwise('/one');
    }).controller('mainController', function($scope, $http) {
  
      $scope.datas = {'veggie':'none','color':'blue'};
  
      $scope.remove = function(whichone){
          var idx = $scope.datas.indexOf(whichone);
          $scope.datas.splice(idx,1);
      };
  
  });
  </code></pre>