Why is my div still showing ng-hide even though ng-show is true, at least according to the scope. I am not sure what's happening here
html file
<div class="agent-content-wrapper" ng-controller="LoaCtrl">
<div class="list-of-agent">
<div class="loa-header">List of Agents</div>
<div class="agent-list" ng-repeat="agent in ListOfAgents">
<div class="agent-main-list">
<div class="agent" ng-click="goToAgentRecords(agent)">{{agent.name}}</div>
</div>
</div>
<div class="agent-details" ng-show="IsAgentSelected" ></div>
</div>
</div>
js file
$scope.IsAgentSelected = false;
$scope.goToAgentRecords = function (agent) {
$scope.IsAgentSelected = true;
}