title: Using AngularJS, how do I set $scope properties in the controller of the parent page
body: <p>Thanks for looking.</p>
  <p>I have the following markup for a modal which shares the same angular controller as it's parent page:</p>
  <pre><code>  &lt;!-- START Add Event Video --&gt;
      &lt;script type=&quot;text/ng-template&quot; id=&quot;EventVideo.html&quot;&gt;
          &lt;div class=&quot;event-modal&quot;&gt;
          &lt;div class=&quot;modal-header&quot;&gt;&lt;h3&gt;Event Video&lt;/h3&gt;&lt;/div&gt;
          &lt;div class=&quot;modal-body&quot;&gt;
          &lt;p&gt;Please enter the URL of either a &lt;strong&gt;YouTube&lt;/strong&gt; or &lt;strong&gt;Vimeo&lt;/strong&gt; video.&lt;/p&gt;
          &lt;span ng-if=&quot;!Event.VideoUrlIsValid&quot; style='color:#9f9f9f;'&gt;This doesn't look like a valid YouTube or Vimeo Url.  Your video may not work.&lt;/span&gt;
          &lt;div class=&quot;row&quot; ng-controller=&quot;EventCreateController&quot;&gt;
               &lt;div pr-form-input span=&quot;12&quot; name=&quot;videoUrl&quot; ng-model=&quot;Event.Item.VideoUrl&quot; placeholder=&quot;YouTube or Vimeo URL&quot; isRequired=&quot;false&quot; no-asterisk&gt;&lt;/div&gt;                                          
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;modal-footer&quot;&gt;&lt;button class=&quot;btn btn-primary&quot; ng-click=&quot;Event.UI.EventVideoModal.Close()&quot;&gt;Done&lt;/button&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/script&gt;
      &lt;!-- END Add Event Video --&gt;
  </code></pre>
  <p>And here is the relevant JavaScript:</p>
  <pre><code> EventVideoModal: {
                  Open: function () {
                      $scope.EventVideoModal = $modal.open({
                          templateUrl: 'EventVideo.html',
                          controller: 'EventCreateController',
                          scope: $scope
                      });
                  },
                  Close: function () {
                      $scope.EventVideoModal.close();
                  }
              }
  </code></pre>
  <p>Please note the <code>Event.Item.VideoUrl</code> model reference.</p>
  <p>The modal allows a user to set the URL of a video, and the goal is to have that set <code>$scope.Event.Item.VideoUrl</code> in the controller and then close the modal.  The parent page and the modal both share the same controller, so I had hoped that this would work.</p>
  <p>The modal behavior is fine (opens and closes as it should), but the <code>$scope.Event.Item.VideoUrl</code> property is not getting set.</p>
  <p>Any advice is appreciated.</p>
  <h1>Problem Solved!</h1>
  <p>Thanks to Bogdan Savluk, I realized that I had a scope inheritance problem.  So, removing both the explicit reference to the controller in the modal HTML as well as in the JavaScript constructor, resolved my problem:</p>
  <pre><code> &lt;!-- START Add Event Video --&gt;
          &lt;script type=&quot;text/ng-template&quot; id=&quot;EventVideo.html&quot;&gt;
              &lt;div class=&quot;event-modal&quot;&gt;
              &lt;div class=&quot;modal-header&quot;&gt;&lt;h3&gt;Event Video&lt;/h3&gt;&lt;/div&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
              &lt;p&gt;Please enter the URL of either a &lt;strong&gt;YouTube&lt;/strong&gt; or &lt;strong&gt;Vimeo&lt;/strong&gt; video.&lt;/p&gt;
              &lt;span ng-if=&quot;!Event.VideoUrlIsValid&quot; style='color:#9f9f9f;'&gt;This doesn't look like a valid YouTube or Vimeo Url.  Your video may not work.&lt;/span&gt;
              &lt;!-- &lt;div class=&quot;row&quot; ng-controller=&quot;EventCreateController&quot;&gt; &lt;--REMOVE THIS! --&gt;
  &lt;div class=&quot;row&quot;&gt;
                   &lt;div pr-form-input span=&quot;12&quot; name=&quot;videoUrl&quot; ng-model=&quot;Event.Item.VideoUrl&quot; placeholder=&quot;YouTube or Vimeo URL&quot; isRequired=&quot;false&quot; no-asterisk&gt;&lt;/div&gt;                                          
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-footer&quot;&gt;&lt;button class=&quot;btn btn-primary&quot; ng-click=&quot;Event.UI.EventVideoModal.Close()&quot;&gt;Done&lt;/button&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/script&gt;
          &lt;!-- END Add Event Video --&gt;
  </code></pre>
  <p>And here is the relevant JavaScript:</p>
  <pre><code> EventVideoModal: {
                  Open: function () {
                      $scope.EventVideoModal = $modal.open({
                          templateUrl: 'EventVideo.html',
                          //controller: 'EventCreateController', &lt;--REMOVE THIS!!
                          scope: $scope
                      });
                  },
                  Close: function () {
                      $scope.EventVideoModal.close();
                  }
              }
  </code></pre>