In my html I have:

```
<body ng-app='myApp'>
    <h1 ng-controller='controller'>
        {{YesOrNo}}
    </h1>
    <div ng-controller='controller'>
        <span>{{YesOrNo}}</span>
        <button ng-click='setYesOrNo()'>Click Me</button>
    </div>
    <script src='script.js'></script>
</body>

```

script.js:

```
const myApp = angular.module('myApp', [])

myApp.controller('controller', ['$scope', 'factory', function($scope, factory) {
    $scope.YesOrNo = factory.getYesOrNo()
    $scope.setYesOrNo = function() {
        $scope.YesOrNo = factory.setYesOrNo()
    }
}])

myApp.factory('factory', function() {
    let YesOrNo = 'Yes'
    return {
        getYesOrNo: function() { 
            return YesOrNo 
        },
        setYesOrNo: function() {
            YesOrNo = YesOrNo === 'Yes' ? 'No' : 'Yes'
            return YesOrNo
        }
    }
})

```

When I click the button, the span changes but h1 doesn't. Why is that? How do I get it to change?

EDIT: Sorry I should have been more clear. I want the two controllers to be separate. I want to know how to share scopes such that they both update when one of the them changes.