title: Isolate scope variable is undefined
body: <p>For some reason I am not able to access my isolate scope variable "index" in my link function. I have tried both <code>@</code> and <code>=</code> to see if it made any difference and this had no effect, I also tried using a word other than index (in case it was already in use by angular or something) with the same result. Error msg: <code>ReferenceError: index is not defined</code>.</p>
  
  <p>directive:</p>
  
  <pre><code>var jobernizeDirectives = angular.module('jobernizeDirectives', []);
  
  jobernizeDirectives.directive('viewLargeContent', function() {
      return {
          scope: {
              index: '=index' 
          },
          require: 'ngModel',
          link: function (scope, el, attrs, ngModel) {
  
              console.log(index);
  
              function openEditor() {
                  console.log(index);
  
                  var main_container = angular.element('.main_container');
                  var view_frame = angular.element('.view-frame');
  
                  console.log(ngModel);
  
                  main_container.append('&lt;div class="dimmer"&gt;&lt;/div&gt;');
                  main_container.append(
  
                          '&lt;div class="large-content' + index + '"&gt;'
                      +   '&lt;textarea&gt;' + ngModel.$viewValue + '&lt;/textarea&gt;' 
                      +   '&lt;button&gt;Submit Changes&lt;/button&gt;'
                      +   '&lt;/div&gt;'
  
                  );  
  
                  var dimmer = angular.element('.dimmer');
                  var content_container = angular.element('.large-content' + index);      
  
                  // content_container.css({ marginTop: (content_container.height()/-2), width: view_frame.width(), marginLeft: (view_frame.width()/-2) })
                  content_container.css({ height: (0.8*main_container.height()), width: view_frame.width(), marginLeft: (view_frame.width()/-2)  })
  
                  content_container.find('button').on('click', function() {
                      var new_content = content_container.find('textarea').get(0).value;
  
                      ngModel.$setViewValue(new_content);
  
                      content_container.hide();
                      dimmer.hide();
                  });
              }
  
              // el.on('click', openEditor);
              el.on('click', openEditor);
  
          }
      }
  });
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div data-ng-controller="resumesController"&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="small-12 columns"&gt;
              &lt;h2&gt;Your Resumes&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="small-12 columns"&gt;
              &lt;table&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Name&lt;/th&gt;
                          &lt;th&gt;Category&lt;/th&gt;
                          &lt;th&gt;Date Added&lt;/th&gt;
                          &lt;th&gt;View/Edit Resume&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr data-ng-repeat="resume in resumes"&gt;
                          &lt;td&gt;{{ resume.name }}&lt;/td&gt;
                          &lt;td&gt;{{ resume.category }}&lt;/td&gt;
                          &lt;td&gt;{{ resume.date_added }}&lt;/td&gt;
                          &lt;td&gt;&lt;button index="le" view-large-content data-ng-model="resume.content"&gt;View Resume&lt;/button&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>