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

U should use bootstrap angular directives and pass scope sir :) — vivid, Jan 28 '16 at 07:25
That what i know ye u can always use factory to comunicate between or find ctrl with jquery and try to change there. Try this link https://angular-ui.github.io/bootstrap/ — vivid, Jan 28 '16 at 07:29
Your approach will surely work, But we are already using bootstrap library (http://getbootstrap.com/javascript/) , and team don't want to include more libraries. So doing some R&D with existing one. — Keval Patel, Jan 28 '16 at 07:35
remove `ng-controller="QuickViewController"` from dialog view — vpsingh016, Jan 28 '16 at 07:44
I cannot, because dialog html is a partial view and link click is on different page in ng-repeate. — Keval Patel, Jan 28 '16 at 07:50
For sure ngBootsrap should be must if ur using bootstrap and want code to be runing fast ;) anyways you could use $('#myModal').scope().SomeValuesOrFunction — vivid, Jan 28 '16 at 08:20

score 2 · Accepted Answer · edited May 23 '17 at 12:04

2

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

edited May 23 '17 at 12:04

Community

1
1

answered Jan 28 '16 at 08:24

Hristo Enev

2,421
18
29

Thanks, I am using $rootScope :) – Keval Patel Jan 28 '16 at 09:20

$scope value is not updating in model dialog

1 Answers1