title: Using the same controller on different elements to refer to the same object
body: <p>I figured if I slapped <code>ng-controller="GeneralInfoCtrl"</code> on multiple elements in my DOM they would share the same <code>$scope</code> (or least two-way binding isn't working).</p>
  
  <p>The reason I want to do this is because I have different read-only views with associated modal dialogs in very different parts of the HTML and they don't share a common ancestor (aside from <code>&lt;body&gt;</code> and <code>&lt;html&gt;</code>).</p>
  
  <p>Is there a way to make both controllers refer to the same object/make data binding work between them?</p>
  
  <hr>
  
  <p>Here's some code for those who insist on seeing markup, <em>written in <strong>Jade</em></strong>:</p>
  
  <pre><code>   .client-box(ng-controller="GeneralInfoCtrl")
          .box-header
              .box-title
                  h5 General Information
              .box-buttons
                  button.btn.btn-small(data-target='#editGeneralInfo', data-toggle='modal', data-backdrop='static') &lt;i class="icon-pencil"&gt;&lt;/i&gt; Edit
          .box-body
              table.table.table-tight.table-key-value
                  tr
                      th Name
                      td {{client.fullName()}}
                  tr
                      th Also Known As
                      td {{client.aka}}
                  tr
                      th Birth Date
                      td {{client.birthDate|date:'mediumDate'}}
      ...
  
  #editGeneralInfo.modal.hide.fade(ng-controller="GeneralInfoCtrl")
      .modal-header
          button.close(type='button', data-dismiss='modal') &amp;times;
          h3 Edit General Information
      .modal-body
          form.form-horizontal.form-condensed
              .control-group
                  label.control-label First Name
                  .controls
                      input(type='text', placeholder='First Name', ng-model='client.firstName')
              .control-group
                  label.control-label Last Name
                  .controls
                      input(type='text', placeholder='Last Name', ng-model='client.lastName')
              .control-group
                  label.control-label Also Known As
                  .controls
                      input(type='text', placeholder='AKA', ng-model='client.aka')
              .control-group
                  label.control-label Birth Date
                  .controls
                      input(type='text', placeholder='MM/DD/YYYY', ng-model='client.birthDate')
  ...
  </code></pre>
  
  <p>And my controller:</p>
  
  <pre><code>function GeneralInfoCtrl($scope) {
      $scope.client = {
          firstName: 'Charlie',
          lastName: 'Brown',
          birthDate: new Date(2009, 12, 15),
          ...
      }
  }
  </code></pre>