HTML DOM Using AngularJS Ng-if Function

Question

I would like to ask about how to make DOM using angularjs but without any page reloading, so here is the code

<div class="container-customscroll">
    <div class="content mCustomScrollbar">
        <div class="itemcheck" ng-repeat="item in dataItem | regex:'name':alfabet | orderBy: 'name' | filter: searchItem">
             <div class="left" ng-if="item.preparation == ''"><i class="fa fa-circle silver"></i>{{item.name}}</div>
             <div class="left" ng-if="item.preparation == '1'"><i class="fa fa-circle green"></i>{{item.name}}</div>
              <div class="left" ng-if="item.preparation == '2'"><i class="fa fa-circle yellow"></i>{{item.name}}</div>
             <div class="left" ng-if="item.preparation == '3'"><i class="fa fa-circle pink"></i>{{item.name}}</div>
                      <div class="right" ng-click="tambahItem(item)" ng-if="item.button == 'add'"><a>+ Tambahkan</a></div>
                        <div class="hapus" ng-click="delete(item.master_code)" ng-if="item.button == 'remove'"><a>Hapus</a></div>
                                            </div>

and here is the angular code:

for post the data:

$scope.tambahItem = function(clickedData){
      var url = '/url';
        $http({
        method: 'POST',
        url: url,
        data: {
            "code": clickedData.master_code,
            "nama": clickedData.name,
            "preparation": clickedData.preparation
        }
      }).success(function(data){
        alert(clickedData.name + " telah ditambahkan");
        $scope.tambahkanKeCart();
      })
    };

here is the delete function:

$scope.delete = function (id) {
       if(confirm('Anda yakin ingin menghapus order ini?')){
           var url = '/url'
              $http({
                  method: "DELETE",
                  url: url + "/" + id
              }).success(function(data){
                  alert("data telah dihapus");
                  $window.location.reload();
              }).error(function(data){
                  alert("Tidak bisa dihapus");
                  $window.location.reload();
              });
           }else{
               return false;
           }
    };

In my code above there are 2 ng-if, in the last line, both are if situation if a certain value is shown. My question is how to make ng-if working without reloading, you can see my current problem in dev.pesanlab.com/order/pemeriksaan

As you can see, the problem is, when you click "tambahkan" button, it doesn't change to "hapus" button, instead it must be reloaded first before the hapus button appear.

I hope everyone understand with my question, and thank you so much for your answers.

Answer 1

Try This-

$scope.tambahItem = function(clickedData){
      var url = '/url';
        $http({
        method: 'POST',
        url: url,
        data: {
            "code": clickedData.master_code,
            "nama": clickedData.name,
            "preparation": clickedData.preparation
        }
      }).success(function(data){
        alert(clickedData.name + " telah ditambahkan");
        $scope.tambahkanKeCart();
       $scope.dapatkanItem();
      })
    };

On Succes, i have called ' $scope.dapatkanItem() ' which will get updated list of 'dataItems' and angular will automatically bind 'dataItem' again.