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">
    <style>
        .navbar { border-radius:0; }
        .jumbotron { padding: 10px !important; }
        .fl { float: left; margin-right: 10px; }
        .ml10 { margin-left: 10px; }
        .pad0 { padding: 0 !important; }
        .pl0 { padding-left: 0 !important; }
        .tags-container p { margin-bottom: 5px !important; font-size: 13px; }
        .salmon { background: #FF9286; }
        .green { background: #D4FFCB; }
        li { list-style: none; }
        em { font-size: 11px; }
    </style>

    <!-- 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="routerApp">

<!-- 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="container">
  <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',
      templateUrl: 'container.html',
      controller: function($scope, $state) {
        console.log('Container state', $state.params);
      }
    }
    
    $stateProvider.state(container);
  });

// Feed module
////////////////////////////////////////////////////////////////////////////////
var feed = angular.module('feed', ['ui.router'])
  feed.component('feedModule', {
    templateUrl: 'feed-module-template.html',
    controller: function($scope, $state) {
      console.log('Feed component', $state.params);
      
      $scope.alert = {
        title: 'alert 1',
        ticker: { id: 1, ticker: "AAPL" },
        tag: { id: 1, term: "iPhone 7" }
      }
      
      $scope.renderAlert = function(alert) {
        $state.go('dashboard', {
          ticker: alert.ticker,
          tag: alert.tag
        },
        { refresh: true });
      }
    }
  });

// Tickers module
////////////////////////////////////////////////////////////////////////////////
var tickers = angular.module('tickers', ['ui.router'])
  tickers.component('tickersModule', {
    templateUrl: 'tickers-module-template.html',
    bindings: {
      ticker: '<'
    },
    controller: function($scope, $state) {
      console.log('Tickers component', $state.params);
      $scope.tickers = [
        { id: 1, ticker: 'AAPL' },
        { id: 2, ticker: 'GOOG' },
        { id: 3, ticker: 'TWTR' }
      ];
      
      console.log('tickers component controller', this)
      
      $state.go('dashboard', { ticker: $scope.tickers[0] });
      
      $scope.clickTicker = function(ticker) {
        console.log('ticker', ticker)
        // $state.go('dashboard', { ticker: ticker });
        $state.go('dashboard', { ticker: ticker }, {reload: true});
      }
    }
  });
  
// Tags module
////////////////////////////////////////////////////////////////////////////////
var tags = angular.module('tags', ['ui.router'])
    tags.config(function($stateProvider) {
      
      const tags = {
        parent: 'container',
        name: 'tags',
        url: '/tags',
        params: {
          ticker: {}
        },
        template: '<tags-module></tags-module>',
        controller: function($scope, $state) {
          console.log('Tags state', $state.params);
        }
      }
      
      $stateProvider.state(tags);
    })
    tags.component('tagsModule', {
      templateUrl: 'tags-module-template.html',
      controller: function($scope, $state) {
        console.log('Tags component', $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; }
          });
        }
        
        $state.params.ticker = $state.params.ticker || {};
        $scope.tags_model = matchTags($state.params.ticker.ticker, tags_model)[0];
        
        $scope.clickTag = function(tag) {
          console.log(' Tag clicked', $state);
          $state.go('dashboard', { tag: tag }, {reload: true});
        }
      }
    });
    
// Social module
////////////////////////////////////////////////////////////////////////////////
var social = angular.module('social', ['ui.router'])
  social.component('socialModule', {
    templateUrl: 'social-module-template.html',
    controller: function($scope, $state) {
      console.log('Social component', $state.params);
      $scope.term = $state.params.tag.term;
    }
  });
  
// ViewHeader module
////////////////////////////////////////////////////////////////////////////////
var view = angular.module('view', ['ui.router'])
  view.component('viewModule', {
    templateUrl: 'view-module-template.html',
    controller: function($scope, $state) {
      console.log('View component', $state.params);
      $scope.term = $state.params.tag.term;
    }
  });

// RouterApp module
////////////////////////////////////////////////////////////////////////////////
var routerApp = angular.module('routerApp', ['ui.router', 'container', 'feed', 'tickers', 'tags', 'social', 'view']);

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

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

  const dashboard = {
    parent: 'container',
    name: 'dashboard',
    url: '/dashboard',
    params: {
      ticker: {},
      tag: {}
    },
    template: '<dash-module></dash-module>',
    controller: function($scope, $state) {
      console.log('Dashboard template state', $state.params);
    },
    views: {
      '' : {
        templateUrl: 'dashboard.html',
      },
      controller: function($scope, $state) {
        console.log('Dashboard view state', $state.params);
      }
    }
  }

  $stateProvider
    .state(login)
    .state(dashboard);
})
container.component('dashboardModule', {
  templateUrl: 'dashboard.html',
  constrollerAs: 'dash',
  bindings: {
    ticker: '<',
  },
  controller: function($scope, $state, $stateParams) {
    console.log('Dashboard component state.params', $state.params);
    console.log('Dashboard component stateParams', $stateParams)
  }
})

<div class="row">
  <div class="col-sm-2">
    <div class="jumbotron text-center salmon fl">
      <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>
</div>

<div class="row">
  <div class="col-sm-2 pl0">
    <div class="jumbotron text-center salmon fl">
      <strong>Tickers List</strong>
        <ul>
          <li ng-repeat="ticker in tickers" class="fl">
            <button ng-click="clickTicker(ticker)">{{ ticker.ticker }}</button>
          </li>
        </ul>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <section>
        <div class="jumbotron text-center salmon">
           <h3>The Dashboard Stuff</h3>
        </div>
        
        <div class="container">
          <div class="row">
            <div class="col-sm-8 pad0">
              <view-module></view-module>
            </div>
          </div>
        </div>
        
        <div class="container">
          <div class="row">
            <div class="col-sm-2">
              <tickers-module ticker="dash.ticker"></tickers-module>
            </div>
            <div class="col-sm-2 ml10">
              <tags-module></tags-module>
            </div>
            <div class="col-sm-2">
              <social-module></social-module>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

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

<div class="jumbotron text-center green">
  <h4>Feed alerts list</h4>
  <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="row">
  <div class="col-sm-4">
    <div class="jumbotron text-center salmon fl">
      <p>SocialMedia <em>(Selected tag below)</em></p>
      {{ term }}
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <section>
        <dashboard-module></dashboard-module>
      </section>
    </div>
    
    <div class="col-sm-4">
      <section>
        <feed-module></feed-module>
      </section>
    </div>
  </div>
</div>

<div class="jumbotron text-center tags-container">
  <h2>ViewHeader</h2>
  {{ term }}
</div>