How to achieve individual states using button bar in tabbed app


I’m struggling to get my head around states in a tabbed app. I have 2 ‘views’ within one tabbed page template which are toggled using a button bar and ng-show like so:

<div class="button-bar">
    <a class="button" ng-class="{'button-energized text-dark': isActive('view1')}" ng-click="setActive('view1')">View 1</a>
    <a class="button" ng-class="{'button-energized text-dark': isActive('view2')}" ng-click="setActive('view2')">View 2</a>

<div id="view1" ng-show="isActive('view1')"></div>
<div id="view2" ng-show="isActive('view2')"></div>

$scope.setActive = function(type) {
    $ = type;

$scope.isActive = function(type) {
    return type === $;

The problem with this approach is that when I toggle between the 2 views, the scroll state is shared between the 2, so if I scroll down on view1, view2 is also scrolled. Essentially what I need is 2 views with independent states within 1 tabbed state. I’ve tried and tried but I can’t make sense of the routing system in a tabbed app.

How would I go about controlling and routing to these 2 views independently, each with it’s own template?


it would help if you provided a simple codePen demonstrating what you have so far