title: Understanding $scope mechanics in Angularjs
body: <p>I can't clarify for myself how to deal with $scope in Angularjs. Although I've resolved my current issue other way, still I need help to get comprehension of $scope usage.</p>
  
  <p>I have the following form (simplified for this example). Index.html:</p>
  
  <pre><code>&lt;form class="form-horizontal" ng-controller="AddItemController as addItemCtrl"&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;New item&lt;/legend&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="submittedBy" class="col-lg-2 control-label"&gt;Submitted by&lt;/label&gt;
        &lt;div class="col-lg-10"&gt;
          &lt;input type="text" class="form-control" id="submittedBy" ng-model="addItemCtrl.item.submitted_by" placeholder="Your name here"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="col-lg-10 col-lg-offset-2"&gt;
          &lt;!--button class="btn btn-default"&gt;Cancel&lt;/button--&gt;
          &lt;button type="submit" class="btn btn-primary" ng-click="addItemCtrl.addItem()"&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>app.js:</p>
  
  <pre><code>    app.controller("AddItemController", ['$scope','$http', function ($scope, $http) {
      $scope.item = {};
  
      this.addItem = function() {
          $http({
              url: "add_item",
              method: "GET",
              params: this.item
           }).
          success(function(data, status, headers, config) {
              var table = angular.element($("#body")).scope();
              table.items = data;
          });
          **this.item={};**
      }
  }]);
  </code></pre>
  
  <p>All I want is to get data from the form, send it to the server, get response, update table and then clear the form. The last part is my issue. I am currenly using <code>this.item={}</code> to handle it. But I do want to call it using $scope, so it should be <code>$scope.item={}</code> and then I want to move it inside <code>addItem</code> function. Unfortunately it's not working for either case.</p>
  
  <p>I have this code and it is working as intended, but it seems I just got lucky/unlucky to make it without understanding mechanism.</p>
  
  <pre><code>app.controller('ItemController', ['$scope','$http', function ($scope, $http) {
      function getItems(){
          $http({
                  url: "get_items",
                  method: "GET"
               }).
              success(function(data, status, headers, config) {
                  $scope.items = data;
              });
      }
      getItems();
  }]);`
  </code></pre>
  
  <p>UPDATE. This is how my AddItemController looks like at the moment:</p>
  
  <pre><code>app.controller("AddItemController", ['$scope','$http', function ($scope, $http) {
      $scope.item = {};
  
      this.addItem = function() {
          $http({
              url: "add_item",
              method: "GET",
              params: this.item
           }).
          success(function(data, status, headers, config) {
              $scope.$$prevSibling.items = data;
              $scope.addItemCtrl.item={};
          });
      }
  }]);
  </code></pre>
  
  <p>It works like I wanted it to. But I don't like <code>$scope.$$prevSibling.items = data;</code> statement, I use it to refresh table which is handled by ItemController, is there a more elegant way to do that?</p>