UI Components.

var app = angular.module('plunker', []);

app.controller('RootController', function() {
  this.view = 'table'
});

app.component('headerComponent', {
  template: `
    <h3>Header component</h3>
    <a class="btn btn-default btn-sm" ng-class="{'btn-primary': $ctrl.view === 'list'}" ng-click="$ctrl.setView('list')">List</a>
    <a class="btn btn-default btn-sm" ng-class="{'btn-primary': $ctrl.view === 'table'}" ng-click="$ctrl.setView('table')">Table</a>
  `,
  controller: function() {
    this.setView = function(view) {
      this.view = view
      this.onViewChange({$event: {view: view}})
    }
  },
  bindings: {
    view: '<',
    onViewChange: '&'
  }
});

app.component('mainComponent', {
  template: `
    <h4>Main component</h4>
    Main view: {{ $ctrl.view }}
  `,
  bindings: {
    view: '<'
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.5.0/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="RootController as root" class="container">
  
    <pre>Root view: root.view = {{ root.view }}</pre>
  
    <header-component view="root.view" on-view-change="root.view = $event.view"></header-component>
    <main-component view="root.view"></main-component>
  
    <!-- http://stackoverflow.com/questions/36033940/how-to-pass-data-between-child-component-in-angular-1-5-not-using-scope#36033940 -->    
    
</body>

</html>

header-component,
main-component {
  display: block;
  border: 2px dashed #BBB;
  background: #F9F9F9;
  padding: 5px;
  margin-bottom: 10px;
}

pre {
  margin-top: 15px;
}
h3, h4 {
  margin-top: 5px;
}