title: 'this' vs $scope in AngularJS controllers
body: <p>In the <a href="https://angularjs.org/#create-components" rel="noreferrer">"Create Components" section of AngularJS's homepage</a>, there is this example:</p>
  
  <pre><code>controller: function($scope, $element) {
    var panes = $scope.panes = [];
    $scope.select = function(pane) {
      angular.forEach(panes, function(pane) {
        pane.selected = false;
      });
      pane.selected = true;
    }
    this.addPane = function(pane) {
      if (panes.length == 0) $scope.select(pane);
      panes.push(pane);
    }
  }
  </code></pre>
  
  <p>Notice how the <code>select</code> method is added to <code>$scope</code>, but the <code>addPane</code> method is added to <code>this</code>. If I change it to <code>$scope.addPane</code>, the code breaks.</p>
  
  <p>The documentation says that there in fact is a difference, but it doesn't mention what the difference is:</p>
  
  <blockquote>
    <p>Previous versions of Angular (pre 1.0 RC) allowed you to use <code>this</code> interchangeably with the <code>$scope</code> method, but this is no longer the case. Inside of methods defined on the scope <code>this</code> and <code>$scope</code> are interchangeable (angular sets <code>this</code> to <code>$scope</code>), but not otherwise inside your controller constructor.</p>
  </blockquote>
  
  <p>How does <code>this</code> and <code>$scope</code> work in AngularJS controllers?</p>