Angular/Bootstrap: ng-hide not working properly

Question

I'm having trouble understanding the ng-show angular directive, it is not working correctly for me. I can't get the boolean value to change in the controller like some examples I've seen online. Rather than use the tabs javascript I decided to try and implement a simple angular show and hide for the tabs. However I have checked many examples on the web and I can't find out what is going wrong. Nothing is showing up at all from the divs.

<div class="row" ng-controller="ExtractionTabsCtrl">
<ul class="nav nav-tabs nav-justified" role="tablist">
  <li id="titles"class="active"><a href="#">Titles</a></li>
  <li id="contacts"><a href="#">Contacts</a></li>
  <li id="writers"><a href="#">Writers</a></li>
  <li id="files"><a href="#">Files</a></li>
  <li id="companies"><a href="#">Companies</a></li>
</ul>
</div>

<div ng-show="titlesdiv">Titles</div>
<div ng-show="contactsdiv">Contacts</div>
<div ng-show="writersdiv">Writers</div>
<div ng-show="filesdiv">Files</div>
<div ng-show="companiesdiv">Companies</div>

and my JS side

    MPWAdminControllers.controller("ExtractionTabsCtrl",["$scope", function($scope){

    $scope.writersdiv=false;
    $scope.contactsdiv=false;
    $scope.filesdiv=false;
    $scope.titlesdiv=true;
    $scope.companiesdiv=false;

    $('#contacts a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
        $scope.writersdiv=false;
        $scope.contactsdiv=true;
        $scope.filesdiv=false;
        $scope.titlesdiv=false;
        $scope.companiesdiv=false;
    })

    $('#writers a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
        $scope.writersdiv=true;
        $scope.contactsdiv=false;
        $scope.filesdiv=false;
        $scope.titlesdiv=false;
        $scope.companiesdiv=false;
    })

    $('#files a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
        $scope.writersdiv=false;
        $scope.contactsdiv=false;
        $scope.filesdiv=true;
        $scope.titlesdiv=false;
        $scope.companiesdiv=false;
    })

    $('#companies a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
        $scope.writersdiv=false;
        $scope.contactsdiv=false;
        $scope.filesdiv=false;
        $scope.titlesdiv=false;
        $scope.companiesdiv=true;
    })

    $('#titles a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
        $scope.writersdiv=false;
        $scope.contactsdiv=false;
        $scope.filesdiv=false;
        $scope.titlesdiv=true;
        $scope.companiesdiv=false;
    })

}]);

Simply Trying to flip the show value on each div whenever a tab is selected. I have a feeling it might have to do with mixing jquery and angular but Im not sure.

Thanks James

Answer 1

Based on where you defined your controller, the ng-show directive is not in the same scope as the links you've defined. You need to change your where the definition of the controller is like so:

<div class="container" ng-controller="ExtractionTabsCtrl">
  <div class="row">
    <ul class="nav nav-tabs nav-justified" role="tablist">
      <li id="titles"class="active"><a href ng-click="test()">Titles</a></li>
      <li id="contacts"><a href="#">Contacts</a></li>
      <li id="writers"><a href="#">Writers</a></li>
      <li id="files"><a href="#">Files</a></li>
      <li id="companies"><a href="#">Companies</a></li>
    </ul>
  </div>

  <div ng-show="titlesdiv">Titles</div>
  <div ng-show="contactsdiv">Contacts</div>
  <div ng-show="writersdiv">Writers</div>
  <div ng-show="filesdiv">Files</div>
  <div ng-show="companiesdiv">Companies</div>
</div>

You'll notice I added a wrapper around your row and subsequent divs. The wrapping div is now the total scope of your controller, instead of just the ul .

Answer 2

You are trying to mix JQuery and AngularJS where you would probably be fine with just AngularJS, this should definitely work.

HTML

<li id="contacts"><a ng-click="ShowContacts()">Contacts</a></li>

 ..

Javascript

$scope.ShowContacts = function()
{
   $scope.contactsdiv = true;

    .....

Just fill in with the rest of your code.

ng-click is an easier way then defining JQuery on click events. It will execute whatever Javascript you put inside of it and is overall cleaner.

You can also move the ng-click to the li tag which would eliminate your need for the a tag to begin with.

Edit:

Like the previous answer said, you need to extend the controller div to include what your changing. I missed that, what you have with JQuery should work then, but ng-click will be much cleaner regardless.