ng-show not working on simple Div

Question

I'm trying to get a simple ng-show to work and it's failing This doesn't work

<h1>Company Files</h1>
<p>Please select which company file you'd like to work with &amp; login to it</p>
<ul class="list-group" >
  <li class="list-group-item" ng-repeat="file in files" >
    <h5><a data-toggle="collapse" data-parent="#accordion"ng-if="!file.CheckedOutBy" ng-click="show = !show">
        <i class="fa fa-check-square-o pull-right" style="color: green;"></i>
        {{file.Name}}
    </a></h5>

    <span ng-if="file.CheckedOutBy != null" class="text-muted">
        <i class="fa fa-external-link pull-right" style="color: red;"></i>
        {{file.Name}}
    </span>

        <div class="panel panel-default" ng-show="show">
            <div class="panel-body">
                <p class="lead">Enter the username and password for this file</p>
                <form class="form-horizontal" role="form">
                  <div class="form-group">
                    <label for="inputUsername3" class="col-sm-2 control-label">Username</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="inputUsername3" placeholder="Username">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-10">
                      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <button type="submit" class="btn btn-default">Sign in</button>
                    </div>
                  </div>
                </form>
            </div>
        </div>

  </li>
</ul>

Yet if I put the SHOW item inside the H5 it ... well it works but then you can't click the form, it just closes it again (which makes sense, after all it's nested)

<h1>Company Files</h1>
<p>Please select which company file you'd like to work with &amp; login to it</p>
<ul class="list-group" >
  <li class="list-group-item" ng-repeat="file in files" >
    <h5><a data-toggle="collapse" data-parent="#accordion"ng-if="!file.CheckedOutBy" ng-click="show = !show">
        <i class="fa fa-check-square-o pull-right" style="color: green;"></i>
        {{file.Name}}

        <div class="panel panel-default" ng-show="show">
            <div class="panel-body">
                <p class="lead">Enter the username and password for this file</p>
                <form class="form-horizontal" role="form">
                  <div class="form-group">
                    <label for="inputUsername3" class="col-sm-2 control-label">Username</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="inputUsername3" placeholder="Username">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-10">
                      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <button type="submit" class="btn btn-default">Sign in</button>
                    </div>
                  </div>
                </form>
            </div>
        </div>
    </a></h5>

    <span ng-if="file.CheckedOutBy != null" class="text-muted">
        <i class="fa fa-external-link pull-right" style="color: red;"></i>
        {{file.Name}}
    </span>

  </li>
</ul>

Any thoughts on what I'm doing wrong. I look at this fiddle (found here on Stackoverflow) and it seems the same http://jsfiddle.net/wD7gR/102/ yet that one works fine

I'm thinking it's something to do with the scope of SHOW but ... ;(

Controller looks simple - it does some data loading from localstorage - just a json file

// home page controller
todoApp.controller('cfController', function($scope, $location, localStorageService, fetch) {
    /// do we already know what 

    fetch.getCompanyfiles()
        .then(function(){
            // load data
        });
});

Answer 1

So I reproduced that little example fairly easily from scratch. The obvious thing is that the fairly straight forward implementation works. I could not reproduce your problem.

http://jsfiddle.net/j5ku9/

I'd try by removing the layers of code you have wrapped around it and simplify things. The culprit I wonder about is some of the bootstrap code you have mixed with angular. Bootstrap IS NOT angular, and it doesn't work well with angular when you add bootstrap components that are leveraging javascript to inject their behavior into your page. There are projects like angular-ui to better integrate bootstrap components into your page in a way that works how angular updates the UI.

I'd start by removing this code:

<a data-toggle="collapse" data-parent="#accordion"...>
   ....
</a>

That is adding a collapse component, but you don't need that because angular is going to do that for you. I'd also remove the ng-if because that can play havoc with your page because it eliminates the whole node from the DOM where ng-show simply hides that element.

I'd strip it down to the essentials of using only angular and add back pieces to find what tech is interfering with your code.

Answer 2

Found it ...

 ng-if="!file.CheckedOutBy"

This was interfering with the show .. so am changing my block

Answer 3

Try

ng-show="$parent.show"

ng-repeat creates a scope of it's own, that's why :D And your div is within an ng-repeat. Hence why when you have the ng-click on the <h5> which is in the same repeat and same scope as the .panel it works.

Hope that helps!