Ich habe zwei verschiedene Div-Tags in meinem HTML-Code, die auf denselben Controller in AngularJS verweisen. Was ich vermute, ist, dass diese Divs, da sie nicht verschachtelt sind, jeweils eine eigene Instanz des Controllers haben, sodass die Daten in beiden Fällen unterschiedlich sind.

<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>

Ich weiß, dass dies leicht behoben werden kann, indem der Knopf in die erste Division eingefügt wird, aber ich denke, dies ist ein wirklich sauberes und einfaches Beispiel, um zu vermitteln, was ich erreichen möchte. Wenn wir den Knopf drücken und ein weiteres Objekt zu unserem Alert-Array hinzufügen, wird die Änderung nicht im ersten Div angezeigt.

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!"
    });
};
}