How to update controller in AngularJS?

Question

JavaScript

I have a cart controller:

app.controller("cartItems", function($scope, $http){
  $http.get("/cart.json").success(function(data) { $scope.all = data });
});

and the HTML code of the cart itself:

<div class="item" ng-repeat="item in all">
      <i class="delete icon-trash" data-id="{{ item.id }}"></i>
      <img class="img" ng-src="{{ item.img }}" alt="">
      <p class="name">{{ item.name }}</p>
      <p class="info">{{ item.desc }}</p>

      <span class="price">{{ item.price }}
        <i class="icon-q"></i>
      </span>
    </div>

The shopping cart is a fixed block in the center of the screen. At the very beginning, he is invisible. When adding a single item to the cart, it sends an action to the server from the beginning. Next, it should update the data from $http, re-render the cart DOM, and show the cart block.
Question: How can I implement this on click?

Answer 1

app.controller("cartItems", function($scope, $http){

  $scope.clickHandler = function(){
    $http.get("/cart.json").success(function(data) { $scope.all = data });
  }
});

<button ng-click="clickHandler()">Click me</buton>

Answer 2

$scope.all.push(data);