Control Angular ng-show by the controller

Question

How can i show the element using ng-show which i can control by my controller using boolean value? (Everything in the controller works fine except this button)

This is my modal html.

<div class="modal-box modal-confirm-pickup-box" ng-show="showPickupModal">
    <div class="modal-container modal-confirm-pickup-container">
      <div class="modal-container-content">
        <div class="modal-container-content-header">
          <strong>
            Login
          </strong>
        </div>
        <div class="modal-container-content-body">
          aaaaaaaeoa
        </div>
      </div>
    </div>
  </div>

This is my code in the controller

.controller('venderConsole', ['$scope','$http', function      ($scope,$http) {

$scope.showPickupModal = false;

$('.close-modal-box-bt').click(function(event) {
/* Act on the event */
$('.modal-box-login').css('display','none');
$.ajax({
    url: 'json/multipleOrder.json',  //Server script to process data
    type: 'get',
    beforeSend: function(xhr){

    },
    success: function(data){
      $scope.orders = data.data

      // $scope.ordersList = $scope.orders[0].products;

      // console.log(orderSize);
      $scope.getTotal = function(order){
          var total = 0;
          for(var i = 0; i < order.products.length; i++){
              var subtotal = order.products[i].subtotal;
              total += subtotal;
          }
          return total;
      }

      $scope.$apply();

    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(XMLHttpRequest);
        alert(textStatus);
        }
    });
  });
}]);

This is my button html.

<table id="front-table" class="table table-bordered" ng-show="!vendorPageToggle">
        <thead>
          <tr class="table-head-text-center">
            <th></th>
            <th>Order</th>
            <th>&#3647; Total</th>
            <th>Address</th>
            <th>Comment</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="order in orders">
            <th class="text-center">
              <span class="table-order-number">
                <strong>{{ order.id }}</strong>
              </span>
              <br>
              <span>{{ order.customer.name }}</span>
              <br>
              <br>
              <span>{{ order.estimated_pickup }}</span>
            </th>
            <td>
              <span ng-repeat="product in order.products">
                1 X {{ product.name }} <br>
                <span ng-repeat="extra in product.extras">
                  <span ng-repeat="item in extra.items">
                    -- ext {{ item }}
                    <br>
                  </span>
                </span>

                <br>
              </span>
            </td>
            <td>{{ getTotal(order) }}</td>
            <td>
              {{ order.customer.address.address1 }}
              <br>
              {{ order.customer.address.address2 }}
              <br>
              {{ order.customer.address.suburb }}
              <br>
              {{ order.customer.address.city }}
              <br>
              <br>
              <strong>
                <i class="icon ion-iphone" style="font-size: 24px;"></i> {{ order.customer.phone }}
              </strong>
            </td>
            <td>aaaa</td>
            <td class="text-center">
              <button class="button button-balanced order-bt" ng-click="showPickupModal = !showPickupModal">
                button-balanced
              </button>
            </td>
          </tr>
        </tbody>
      </table>

my Css

.modal-box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    /*display: none;*/
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-container {
    position: relative;
    width: auto;
    margin: 10px;
}

.modal-container-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 20px;
    outline: 0;
    overflow: hidden;
}

.modal-container-content-header {
    background-color: #FF0000;
    color: #fff;
    text-align: center;
    font-size: 32px;
    height: 80px;
    padding-top: 28px;
}
.modal-container-content-body {
    padding: 15px;
    background-color: #EEEEEE;
}

But when i click my button nothing happened, my modal still not appear same as the beginning.

How can i fix this. Thanks!

Answer 1

Here is your code working as expected: JS Fiddle

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script>
var app = angular.module('app', []);

app.controller('ctrl', function ($scope) {
    $scope.hello = 'Ohh, hello there!';
    $scope.showPickupModal = false;
});
</script>

<div ng-app='app' ng-controller='ctrl'>

  <button class="button button-balanced order-bt" ng-click="showPickupModal = !showPickupModal">
    button-balanced
  </button>


  <div class="modal-box modal-confirm-pickup-box" ng-show="showPickupModal">
    <div class="modal-container modal-confirm-pickup-container">
        <div class="modal-container-content">
            <div class="modal-container-content-header"> <strong>
            Login
          </strong>

            </div>
            <div class="modal-container-content-body">{{hello}}</div>
        </div>
    </div>
  </div>

</div>

If this don't solve your problem, post more code so we can see what is wrong that your controller is not working properly.

EDIT with new full code

Working Plunker

Ok, I don't know why your code does not work. But, just to test things up, I like to don't do anything on the view. So, I've removed your code on the html and exchanged by a function. Like this:

ng-click='showPickupModal = !showPickupModal'

This was removed by this:

ng-click='togglePickupModal()'

and, on the controller, I've added this function and, before any console.log to test, it just worked.

$scope.togglePickupModal = function () {
  $scope.showPickupModal = !$scope.showPickupModal;
};

You haven't showed your code for '.close-modal-box-bt', so I've used the toggle function to close the modal too. Problem solved.