title: How to remove from an array in an angular directive
body: <p>I have some code which is working to add and remove entries to and from arrays in my scope. Right now the code isn't reused but rather cut/pasted and tweaked. Also, it rather naughtily uses scope inheritance to access the array. I'm trying to create a directive that will fix these two problems. The directive works fine as long as I add entries to the array. As soon as I remove an entry I appear to break the bi-directional binding. Any clues as to how I should go about this?</p>
  
  <p>Fiddle is <a href="http://jsfiddle.net/axzr/BSkd7/" rel="nofollow">here</a>.</p>
  
  <p>It shows the SkillsCtrl which is the old code, and ListEditCtrl which is the new (reproduced below from the fiddle). Adding an entry to either list will update both but removing an entry from either list breaks the binding.</p>
  
  <pre><code>function SkillsCtrl($scope) {
    $scope.addSkill = function () {
        $scope.profile.skills = $scope.profile.skills || [];
        $scope.profile.skills.push($scope.newskill);
        $scope.newskill = "";
    };
  
    $scope.removeSkill = function () {
        $scope.profile.skills = _.without($scope.profile.skills, this.skill);
    };
  }
  
  function ListEditorCtrl($scope) {
    $scope.addItem = function () {
        $scope.list = $scope.list || [];
        $scope.list.push($scope.newitem);
        $scope.newitem = "";
    };
  
    $scope.removeItem = function () {
        $scope.list = _.without($scope.list, this.item);
    };
  }
  </code></pre>