How can I create an array from the value of the same directive on different pages in Angular JS?
<p>I am using Angular 1.5.7 and am trying to see if I can push the value of an attribute within a directive used on several different pages to an array that lives in the controller.</p>

<p>I am pretty sure that I need to used transclusion in order to do this but I am stuck. Below is a simplified version of what I have so far:</p>

<p><strong>about.html</strong></p>

<pre><code>&lt;div ng-controller="MainCtrl as ctrl"
  &lt;div cd-header mypage="About"&gt;
    &lt;div&gt;About Page&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>contact.html</strong></p>

<pre><code>&lt;div ng-controller="MainCtrl as ctrl"
  &lt;div cd-header mypage="Contact"&gt;
    &lt;div&gt;Contact Page&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>header.html</strong></p>

<pre><code>&lt;div&gt;{{mypage}}
  &lt;div ng-transclude&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>cd-header.js</strong></p>

<pre><code>var cdHeader = function() {
  return {
    scope: {
      mypage: "@"
    },
    transclude: true,
    templateUrl: 'header.html',
    link: function(scope) {
      // Not sure but I think I might need a function here
    }
  }
}

module.exports = cdHeader;
</code></pre>

<p><strong>MainCtrl.js</strong></p>

<pre><code>var MainCtrl = function($scope) {
  var nav = [];
  // Not sure how items that are pushed to the nav get to this point
}

module.exports = MainCtrl;
</code></pre>

<p><strong>main.js</strong></p>

<pre><code>var app = angular.module("myapp", [
  'about',
  'contact',
])
  .controller('MainCtrl', MainCtrl)
  .directive('cdHeader', cdHeader)
</code></pre>

<p>I am able to get the value of the <code>mypage</code> attribute in the directive as well as its transcluded <code>&lt;div&gt;</code> to appear in the header but only for the current page in view.</p>

<p>The part I am missing is how to get all of the <code>mypage</code> values from each page into the header regardless of the current page in view. I am somewhat new to Angular and have read a lot but have not come across anything that explains how this can be done. Maybe this is achieved with a service? If so, I'm not sure how to go about it.</p>

<p>To clarify with a visual. This is what I see:</p>

<p><a href="https://i.stack.imgur.com/YH4Bd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YH4Bd.jpg" alt="enter image description here"></a></p>

<p>But this is what I want to see:</p>

<p><a href="https://i.stack.imgur.com/98fJx.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/98fJx.jpg" alt="enter image description here"></a></p>