I have two divs with the same ng-controller in AngularJS, how can I make them share information?

Question

I have two different div tags in my html code referencing the same controller in AngularJS. What I suspect is that since these divs aren't nested they each have their own instance of the controller, thus the data is different in both.

<div ng-controller="AlertCtrl">
<ul>
    <li ng-repeat="alert in alerts">
        <div class="span4">{{alert.msg}}</div>
    </li>
</ul>
</div>        
<div ng-controller="AlertCtrl">
<form ng-submit="addAlert()">
    <button type="submit" class="btn">Add Alert</button>
</form>
</div>

I know this could easily be fixed by including the button in the first div but I feel this is a really clean and simple example to convey what I am trying to achieve. If we were to push the button and add another object to our alerts array the change will not be reflected in the first div.

function AlertCtrl($scope) {

$scope.alerts = [{
    type: 'error',
    msg: 'Oh snap! Change a few things up and try submitting again.'
}, {
    type: 'success',
    msg: 'Well done! You successfully read this important alert message.'
}];

$scope.addAlert = function() {
    $scope.alerts.push({
        type: 'sucess',
        msg: "Another alert!"
    });
};
}

Answer 1

This is a very common question. Seems that the best way is to create a service/value and share between then.

mod.service('yourService', function() {
  this.sharedInfo= 'default value';
});


function AlertCtrl($scope, yourService) {
  $scope.changeSomething = function() {
    yourService.sharedInfo = 'another value from one of the controllers';
  }

  $scope.getValue = function() {
    return yourService.sharedInfo;
  }
}

<div ng-controller="AlertCtrl">{{getValue()}}</div>
<div ng-controller="AlertCtrl">{{getValue()}}</div>

Answer 2

If I understand the question correctly, you want to sync two html areas with the same controller, keeping data synced.

since these divs aren't nested they each have their own instance of the controller, thus the data is different in both

This isn't true, if you declare the controllers with the same alias (I'm using more recente angular version):

<div ng-controller="AlertCtrl as instance">
  {{instance.someVar}}
</div>
<div ng-controller="AlertCtrl as instance">
  {{instance.someVar}} (this will be the same as above)
</div>

However, if you WANT them to be different and comunicate each other, you will have to declare different aliases:

<div ng-controller="AlertCtrl as instance1">
  {{instance1.someVar}}
</div>
<div ng-controller="AlertCtrl as instance2">
  {{instance2.someVar}} (this will not necessarily be the same as above)
</div>

Then you can use services or broadcasts to comunicate between them (the second should be avoided, tough).