Dynamically change Tabs


I am developing an login application with Tabs view. I used Login Tabs Icon for login and added ng-click (it will then make a modal box open and user can enter details and login with a http request to server and save in session storage ). After which on success response I want the tab Icon should change to logout.

I previously used ng-show and ng-hide for this but its not working now in tabs (also that fix I used need reloading of the app and check that if there is login success value in localstorage so I can use ng-show and hide on that base to show login and logout Icons).

I have prepared a small plnk http://plnkr.co/edit/VoqzKh?p=preview in which I want on clicking login the login icon goes and logout remains and vice-versa.


I suggest you define different abstract states. An abstract login and an abstract logout state.