Angularjs directives communication with controller and Dom manipulation issue (controller as syntax)

Please find my original project template at Original Template . I need to fill up the parts of the code which are left blank. This project is to create custom tabs directive using AngulaJs.  But the condition is,  I should not use templates, transclusion, compile and no isolated scope and no DOM manipulations in controller and no Jquery but jQlite is Ok.  

I have got reference of almost similar project which meets above conditions at Reference Code and attached the working version of this in the post (angular-tabs-master.zip).  I am using this code as reference  and working on my custom tabs directive project. Please find the progress I made so far at Under Progress Code. Here when  I click any tab, I expect change in {"index":0,"count":0} and toggle 'active' class to particular tab, which is not happening as of now. At this point I am stuck up and not able to make any progress. Can any one guide me to make progress on it further?

I am feeling I am making some mistake in my code snippet below, which I am failing to fix:

 
 var value = $attrs.dataSelected;
                var active = /[-*\/%^=!<>&|]/.test( value ) ? scope.$eval( value ) : !!value;
			           //	console.log(active);

                tabsCtrl.tabs.index = tabsCtrl.tabs.index || ( active ? index : null );

Open in new window

angular-tabs-master.zip
Too SmartAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bob LearnedCommented:
1) " toggle 'active' class to particular tab"
Look at the conditional ng-class directive:

Conditionally Apply Classes with ng-class
https://www.launchacademy.com/codecabulary/learn-javascript/angular/conditionally-apply-classes-with-ng-class

2) tabsCtrl.tabs.index = tabsCtrl.tabs.index || ( active ? index : null );
Is tabs.index an integer or a boolean, because the resulting expression here would be boolean.
Too SmartAuthor Commented:
Thanks Bob for your valuable time.

1) I am checking into this.

2) That is the really confusing part of code to me. Index is supposed to be Integer.  When I click Tab #1 I should get {"index":1,"count":3}, when I click Tab#2 I should get {"index":2,"count":3}, etc . At least if you can help me to fix this,  that gives me break through to go to next step in my project. If you notice the attached zip file and open index.html the application is perfectly well. The only difference I can understand between that code and my code is, here I need to work on var self = this notation and en-tab attributes. Any further help is much appreciated.

Thanks
Bob LearnedCommented:
I like using Plunker to allow others to play around with Angular stuff.  If you don't know about Plunker, see

Plunker: A Primer in Open Innovation
http://www.code-love.com/2014/09/09/plunker/

Plunker
http://plnkr.co/
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Bob LearnedCommented:
Tell me what this line is supposed to do:

tabsCtrl.tabs.index = tabsCtrl.tabs.index || ( active ? index : null );
Too SmartAuthor Commented:
Bob, I am not clear about your plunker references,  If you are asking about working plunker of the zip code that I have attached, please find it at http://plnkr.co/edit/rTehl67kY9wOIR0qmyyC?p=preview. I am using this code as a reference to work on my project.  From this plunker I am feeling ,
scope.tabs.index = scope.tabs.index || ( active ? index : null );

Open in new window

, it will return Integer, because they are using it for equality check
element.toggleClass( 'active', scope.tabs.index === index ); 

Open in new window

.

In my case also
tabsCtrl.tabs.index = tabsCtrl.tabs.index || ( active ? index : null ); 

Open in new window

, should return Integer and I need to add {active:true} instead toggleClass. Please let me know if you want me to provide any further clarification on this?
Bob LearnedCommented:
Plunker saves me the time of downloading a zip file, and trying to figure out how to get the example up an running quickly.  I get this error accessing that URL:

       Unable to connect to any application instances.

If you put the conditional ng-class in the view, then you shouldn't need any code to add the 'active' class.  Then, you should be able to remove that code.
Too SmartAuthor Commented:
May be plunker was down temporarily when you were accessing, that URL is working fine now.
Bob LearnedCommented:
You are right--it's working fine now.

Here is your tab:

  <ul class="nav nav-tabs">
                <li ng-tab-head>
                    <a href="#" ng-click="$event.preventDefault()">Tab 1</a>
                </li>
                <li ng-tab-head>
                    <a href="#" ng-click="$event.preventDefault()">Tab 2</a>
                </li>
                <li ng-tab-head="active">
                    <a href="#" ng-click="$event.preventDefault()">Tab 3</a>
                </li>
                <li ng-tab-head>
                    <a href="#" ng-click="$event.preventDefault()">Tab 4</a>
                </li>
            </ul>

Open in new window


I would think that you need to add an ng-class, like this:

<a href="#/link" ng-class="{'active': currentTab == 3} ">Tab 4</a>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.