$scope value is not updating in model dialog

Question

I am using angularjs and opening bootstrap model. I want to update my $scope variable and want to show it in model. But new value is not coming on model. My code is,

View,

<li ng-controller="QuickViewController">
               <a href="javascript:void(0)" ng-click="OpenQuickView(value.productId)" data-toggle="modal" data-target="#myModal"></a>

Rendering dialog,

<div>
    @Html.Raw(File.ReadAllText(Server.MapPath("~/Views/Product/QuickView.html")))
</div>

Dialog view,

<div ng-controller="QuickViewController" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    {{test1}}
    content should come
</div>

My controller,

function QuickViewController($scope, $http) {
    $scope.test1 = "111";
    $scope.OpenQuickView = function (ProductId) {
        $scope.test1 = "222";
    }
}

app.controller('QuickViewController', QuickViewController);

By default $scope.test1 is 111, and when I click on link, value should be 222. But new value is not coming in dialog. Where do I need to change ?

Answer 1

It will not update because you are using two controllers. Even if they are with the same name they have different scopes. This is the reason that the function in the first instance of the controller won't update the value in the second. They are different instances.

Try to share your data with services instead. You can try also with $rootScope or events, but services will be the best approach.

Check this solution in the StackOverflow: Share data between AngularJS controllers