How to access $scope variables on AngularJS from Controller to view

Question

I have a simple scope variable on my AngularJS Controller. I have assigned it a specific endpoint value like so:

$scope.isItAvailable = endpoint.IS_IT_AVAILABLE;

How do I assign it in my view(HTML) in order to have an ng-if say, if it it true show it, if it is false hide it.

I have tried it implementing a function, have a ctrl.checkIfavailable , and calling it in the HTML, but nothing is helping. The value is never been read on the view side.

Something like this :

  $scope.checkIfItIsAvailable = () => {
    return $scope.isZKAvailable
  }

And called that in the ng-if . Tried as a controller as well, but didn't work.

I consoled.log the response from the server and I get a boolean value true or false , depending on the situation

Here is my code for the HTML:

<div class="col-lg-8" ng-if="Ctrl.isItAvailable">
.... // More code here
</div>

And in the controller:

  $scope.isItAvailable = endpoint.IS_IT_AVAILABLE;

  console.log(endpoints.IS_IT_AVAILABLE); // This returns the boolean value I 
  // want to access

Current Result Now, if I leave the ng-if, like that, I don't see the element as it doesn't access it at all.

Expected Results I want to show/hide the element, depending on the value of isItAvailable.

Answer 1

As you attached it to the $scope , just use it like this

<div class="col-lg-8" ng-if="isItAvailable">

</div>

If you want to use the ControllerAs syntax, define the isItAvailable to this instead of $scope in the controller and then name the ng-controller="yourControllerName as Ctrl" in the view. You then refere to the isItAvailable as Ctrl.isItAvailable