AngularJS ui-router $state change

<!DOCTYPE html>
<html>
<head>

    <!-- CSS (load bootstrap) -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">

    <!-- JS (load angular, ui-router, and our custom js file) -->
    <script src="https://code.angularjs.org/1.6.1/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router.statehelper/1.3.1/statehelper.min.js"></script>
    <script src="app.js"></script>
</head>

<!-- apply our angular app to our site -->
<body ng-app="tickersApp">

<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" ui-sref="#">Angular UI-Router states</a>
    </div>
</nav>

<!-- MAIN CONTENT -->
<div class="app-container clearfix">
  <div ui-view></div>
</div>

</body>
</html>

// Container module
////////////////////////////////////////////////////////////////////////////////
var container = angular.module('container', [ 'ui.router' ])
  container.config(function($stateProvider) {
    const container = {
      name: 'container',
      url: '/container',
      views: {
        '': {
          templateUrl: 'container-template.html',
          controller: function($scope) {
            console.log('CONTAINER view $state');
          }
        },
        'dashboard@container': {
          templateUrl: 'dashboard-template.html',
          controller: function($scope, $state) {
            console.log('DASHBOARD view $state', $state);
          }
        },
        'feed@container': {
          templateUrl: 'feed-template.html',
          controller: function($scope) {
            console.log('FEED view $state');
          }
        }
      }
    }
    
    $stateProvider.state(container);
  });

// Tickers module
////////////////////////////////////////////////////////////////////////////////
var tickers = angular.module('tickers', ['ui.router'])

  tickers.config(function($stateProvider) {
      
    const tickers = {
      parent: 'dashboard',
      name: 'tickers',
      url: '/tickers',
      params: {
        ticker: {}
      },
      views: {
        '': {
          templateUrl: 'tickers-template.html',
          controller: function($scope, $state) {
            console.log('TICKERS view $state');
            
            $scope.tickers = [
              { id: 1, ticker: 'AAPL' },
              { id: 2, ticker: 'GOOG' },
              { id: 3, ticker: 'TWTR' }
            ];
            
            $scope.clickTicker = function(ticker) {
              console.log('ticker', ticker)
              $state.go('tags', { ticker: ticker });
            }
          }
        },
        'tags@tickers': {
          templateUrl: 'tags-template.html',
          controller: function($scope) {
            console.log('TAGS view $state');
          }
        }
      }
    }
    
    $stateProvider.state(tickers);
  })
  tickers.component('tickersModule', {
    templateUrl: 'tickers-template.html',
    controller: function($scope, $state) {
      console.log('TICKERS component');
      $scope.tickers = [
        { id: 1, ticker: 'AAPL' },
        { id: 2, ticker: 'GOOG' },
        { id: 3, ticker: 'TWTR' }
      ];
      
      $scope.clickTicker = function(ticker) {
        console.log(' Ticker clicked!', $state)
        $state.go('tickers.tags', { ticker: ticker });
      }
    }
  });
    
// Tags module
////////////////////////////////////////////////////////////////////////////////
var tags = angular.module('tags', ['ui.router'])
  tags.config(function($stateProvider) {
    
    const tags = {
      name: 'tags',
      url: '/tags',
      params: {
        ticker: {},
        tag: {}
      },
      parent: 'tickers',
      views: {
        '': {
          templateUrl: 'tags-template.html',
          controller: function($scope, $state) {
            console.log('Tags view $state', $state.params);
            const tags_model = [
              {
                ticker: 'AAPL',
                tags : [{ id: 1, term: 'iPhone 7' }, { id: 2, term: 'iPhone 8' }, { id: 3, term: 'Tim Cook' }]
              },
              {
                ticker: 'GOOG',
                tags : [{ id: 4, term: 'Pixel' }, { id: 5, term: 'Pixel XL' }, { id: 6, term: 'Chrome Book' }]
              },
              {
                ticker: 'TWTR',
                tags : [{ id: 7, term: 'tweet' }, { id: 8, term: 'retweet' }, { id: 9, term: 'moments' }]
              }
            ];
            
            function matchTags(ticker, model) {
              return model.filter(function(obj){
                if (obj.ticker === ticker) { return obj; }
              });
            }
            
            $scope.tags_model = matchTags($state.params.ticker.ticker, tags_model)[0];
            
            $scope.clickTag = function(tag) {
              $state.go('tags', { tag: tag });
            }
            
            console.log('Tags init', $state.params);
          }
        },
        'view@tags': {
          templateUrl: 'view-template.html',
          controller: function($scope, $state) {
            console.log('VIEWS view $state');
            $scope.term = $state.params.tag.term;
          }
        },
        'chart@tags': {
          templateUrl: 'chart-template.html',
          controller: function($scope, $state) {
            console.log('CHART view $state');
            $scope.term = $state.params.tag.term;
          }
        },
        'social@tags': {
          templateUrl: 'social-template.html',
          controller: function($scope, $state) {
            console.log('SOCIAL view $state');
            $scope.term = $state.params.tag.term;
          }
        }
      }
    }
    
    $stateProvider.state(tags);
  })
  tags.component('tagsModule', {
    templateUrl: 'tags-template.html',
    controller: function($scope, $state) {
      console.log('TAGS component', $state.params);
    }
  });
  
// ViewHeader module
////////////////////////////////////////////////////////////////////////////////
var view = angular.module('view', ['ui.router'])
  view.component('viewModule', {
    templateUrl: 'view-template.html',
    controller: function($scope, $state) {
      console.log('VIEW component', $state.params);
      $scope.term = $state.params.tag.term;
    }
  });
  
// Chart module
////////////////////////////////////////////////////////////////////////////////
var chart = angular.module('chart', ['ui.router'])
  chart.component('chartModule', {
    templateUrl: 'chart-template.html',
    controller: function($scope, $state) {
      console.log('CHART component', $state.params);
      $scope.term = $state.params.tag.term;
    }
  });
  
// Social module
////////////////////////////////////////////////////////////////////////////////
var social = angular.module('social', ['ui.router'])
  social.component('socialModule', {
    templateUrl: 'social-template.html',
    controller: function($scope, $state) {
      console.log('SOCIAL component', $state.params);
      $scope.term = $state.params.tag.term;
    }
  });
  
// TickersApp module
////////////////////////////////////////////////////////////////////////////////
var tickersApp = angular.module('tickersApp', ['ui.router', 'container', 'tickers', 'tags', 'view', 'chart', 'social']);

tickersApp.config(function($stateProvider, $urlRouterProvider) {
    
  $urlRouterProvider.otherwise('/login');

  const login = {
    name: 'login',
    url: '/login',
    templateUrl: 'login-template.html',
    bindToController: true,
    controllerAs: 'l',
    controller: function($state) {
      this.login = function() {
        $state.go('container', { });
      }
    }
  }

  $stateProvider
    .state(login);
});

<div class="tags-state">
  <div class="fl w100">
    <em>Tags state</em>
  </div>
  
  <div class="tags-panel">
    <p>Tags List:</p>
    <ul>
      <li ng-repeat="tag in tags_model.tags">
        <button ng-click=clickTag(tag)>{{ tag.term }}</button>
      </li>
    </ul>
  </div>
  
  <div class="activity-panel">
    <view-module></view-module>
    
    <chart-module></chart-module>
    
    <social-module></social-module>
  </div>
  
</div>

<div class="tickers-state">
  <div class="fl w100">
    <em>Tickers state</em>    
  </div>

  <div class="tickers-panel">
    <div class="tickers-list">
      <ul>
        <li ng-repeat="ticker in tickers" class="fl">
          <button ng-click="clickTicker(ticker)">{{ ticker.ticker }}</button>
        </li>
      </ul>      
    </div>
  </div>

  <tags-module class="fl"></tags-module>
  
</div>

<div class="dashboard-state">
  <div class="fl w100">
    <em>Dashbaord state</em>  
  </div>
  
  <!--<div ui-view="tickers"></div>-->
  <tickers-module></tickers-module>
</div>

<div>
  <h1>Login Page</h1>
  <button ng-click="l.login()">LOGIN</button>
</div>

<div class="feed-state">
  <em>Feed state</em>
  <!--<button ng-click=renderAlert(alert)>{{ alert.title }}</button>-->
</div>

<div>
  <ul>
    <li ng-repeat="tag in tags_model.tags">
      <button ng-click=clickTag(tag)>{{ tag.term }}</button>
    </li>
  </ul>
</div>

<div class="social-content">
  <p>SocialMedia</p>
  {{ term }}
</div>

<div>
  <div class="fl w100">
    <em>Container state</em>  
  </div>
  
  <div ui-view="dashboard" class="fl"></div>
  <div ui-view="feed" class="fl"></div>
</div>

<div class="view-header">
  <p>ViewHeader</p>
  {{ term }}
</div>

<div class="highchart">
  <p>Chart</p>
  {{ term }}
</div>

navbar { border-radius:0; }
li { list-style: none; }
em { font-size: 11px; }
.fl { float: left; }
.ml10 { margin-left: 10px; }
.w100 { width: 100%; }
.tags-container p { margin-bottom: 5px !important; font-size: 13px; }
.clearfix::after { content: ""; clear: both; display: table; }

.app-container { clear: both; margin: 0 auto; padding: 10px; width: 820px; background: #f0f0f0; }

.dashboard-state { float: left; display: block; padding: 10px; width: 600px; background: #FF9286; }

.feed-state { float: left; display: block; padding: 10px; width: 200px; background: #D4FFCB; }

.tickers-state { float: left; padding: 10px; background: #CBF4FF; }

.tickers-panel { float: left; }

.tickers-list { position: relative; left: -40px; }

.tags-state { float: left; margin-top: -20px; margin-left: 10px; padding: 10px; width: 340px; background: #FFC300; }

.tags-panel { float: left; margin-right: 5px; padding: 5px; width: 120px; border: 1px solid #fff; }

.activity-panel { float: left; width: 195px; padding: 5px; background: #FFDB66; }

.view-header { float: left; width: 100%; border: 1px solid #fff; background: #ffedb2; }

.highchart { float: left; width: 100%; border: 1px solid #fff; background: #fff4d1; }

.social-content { float: left; width: 100%; border: 1px solid #fff; background: #fffbef; }