title: AngularJS: Can't get access value of isolate scope property in directive
body: <h3>Problem:</h3>
  
  <p>In a directive nested within 3 ui-views, I can't access the values of my isolate scope. <code>scope.values</code> returns <code>{}</code> but when I console.log <code>scope</code> I can see all the values on the <code>values</code> property.</p>
  
  <p>In a different app I can make this works and I converted this one to that method as well but it still doesn't work and I'm tracing the routes, ctrl's and I can't find the difference between the two.</p>
  
  <p><strong>Where I'm trying to access it from</strong></p>
  
  <p>Init App > ui-view > ui-view > ui-view > form-elements > form-accordion-on</p>
  
  <h3>What I'm working with:</h3>
  
  <p>The view</p>
  
  <pre><code>&lt;ul class='form-elements'&gt;
      &lt;li
          class='row-fluid'
          ng-hide='group.hidden'
          ng-repeat='group in main.card.groups'
          card='main.card'
          form-element
          values='values'
          group='group'&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This directive contains tons of different form types and calls their respective directives.</p>
  
  <pre><code>.directive('formElement', [function () {
      return {
          scope: {
              values: '=',
              group: '='
          },
          link: function(scope, element) {
              l(scope.$parent.values);
              element.attr('data-type', scope.group.type);
          },
          restrict: 'AE',
          template: "&lt;label ng-hide='group.type == \"section-break\"'&gt;" +
              "{{ group.name }}" +
              "&lt;strong ng-if='group.required' style='font-size: 20px;' class='text-error'&gt;*&lt;/strong&gt; " +
              "&lt;i ng-if='group.hidden' class='icon-eye-close'&gt;&lt;/i&gt;" +
          "&lt;/label&gt;" +
          "&lt;div ng-switch='group.type'&gt;" +
              "&lt;div ng-switch-when='accordion-start' form-accordion-on card='card' values='values' group='group'&gt;&lt;/div&gt;" +
              "&lt;div ng-switch-when='accordion-end' form-accordion-off values='values' class='text-center' group='group'&gt;&lt;hr class='mbs mtn'&gt;&lt;/div&gt;" +
              "&lt;div ng-switch-when='address' form-address values='values' group='group'&gt;" +
          "&lt;/div&gt;"
      };
  }])
  </code></pre>
  
  <p>This is the directive an example directive.</p>
  
  <pre><code>.directive('formAccordionOn', ['$timeout', function($timeout) {
      return {
          scope: {
              group: '=',
              values: '='
          },
          template: "&lt;div class='btn-group'&gt;" +
              "&lt;button type='button' class='btn' ng-class='{ active: values[group.trackers[0].id] == option }' ng-model='values[group.trackers[0].id]' ng-click='values[group.trackers[0].id] = option; toggleInBetweenElements()' ng-repeat='option in group.trackers[0].dropdown track by $index'&gt;{{ option }}&lt;/button&gt;" +
          "&lt;/div&gt;",
          link: function(scope, element) {
              console.log(scope) // returns the scope with the values property and it's values.
              console.log(scope.values); // returns {}
          })
  
          // etc code ... 
  </code></pre>
  
  <p>Closely related to but I'm using <code>=</code> on every isolate scope object:
  <a href="https://stackoverflow.com/questions/17978702/angularjs-cant-get-a-value-of-variable-from-ctrl-scope-into-directive">AngularJS: Can&#39;t get a value of variable from ctrl scope into directive</a></p>
  
  <p><strong>Update</strong></p>
  
  <p>Sorry if this is a bit vague I've been at this for hours trying to figure out a better solution.   This is just what I have atm. </p>
  
  <p><strong>Update 2</strong></p>
  
  <p>I cannot believe it was that <code>simple</code>.</p>
  
  <pre><code>var init = false;
  scope.$watch('values', function(newVal, oldVal) {
      if (_.size(newVal) !== _.size(oldVal)) {
          // scope.values has the value I sent with it!
          init = true;
          getInitValues();
      }
  });
  </code></pre>
  
  <p>But this feels hacky, is there a more elegant way of handling this?</p>
  
  <p><strong>Update 3</strong></p>
  
  <p>I attach a flag in my ctrl when the values are ready and when that happens bam!</p>
  
  <pre><code>scope.$watch('values', function(newVal) {
      if (newVal.init) {
          getInitValues();
      }
  });
  </code></pre>