Bootstrap Popover not updating Scope Variable

Question

Once user click on the Input field .. I want to get the ID of the input field & filter the Object & bind the data on the Popover window. But Scope is not getting updated from directive. Below are the code please let me know where i'm doing wrong

  var app = angular.module('MyModule', []);
    app.controller("TestController", function ($scope, $window) {
        //$scope.ID = '0';
        $scope.myObj = [{ "ID": 0, "Name": 'user0' }, { "ID": 1, "Name": 'user1' }, { "ID": 2, "Name": 'user2' }]

        $scope.GetData = function () {

            var match = $.grep($scope.myObj, function (e) {
                return e.ID == $scope.myID
            });

            return match;
        };

    });

    app.directive('popOver', function ($compile, $timeout) {
        return {
            restrict: 'A', 
            link: function (scope, el, attrs) {
                $(el).bind('click', function () {
                    scope.$apply(function () {
                        scope.myID = attrs.popoverid ;
                    });
                });


                $(el).popover({
                    placement: 'bottom',
                    container: 'body',
                    trigger: "click",
                    content: $compile($('#popover-content').html())(scope)
                });
            }
        };
    });


 <div ng-repeat="i in [0,1,2]">
         <input  style="background: transparent"
            type="text"
            pop-over
            popoverid="{{i}}" 
             id="{{i}}"
            class="form-control enterTime" data-html="true">
        <br /><br />
    </div>


    <div class="bottom hide" id="popover-content">
        <div class="arrow" style="left: 47%;"></div>
        <div class="Bground-Project"> 
            <table>
                <tr>
                    <td>
                        {{GetData()}}
                    </td>
                </tr>
            </table> 
            <button type="button" ng-click="buttonClicked()">click me</button> 
        </div>
    </div>

score 0 · Accepted Answer · edited May 23 '17 at 12:14

when a primitive type (i.e., a string, number, or boolean type) is written to -- e.g., scope.name = newName -- the "write" always goes to the local scope/object. In other words, the child scope gets its own name property that shadows the parent property of the same name. The fix is to use an object, rather than a primitive type, in the parent scope. The child scope will then get a reference to that object. Any writes to the object properties (whether from the parent or the child) will go to that one object. (The child scope does not get its own object.)

Is it Possible to Update Parent Scope from Angular Directive with scope: true?

Bootstrap Popover not updating Scope Variable

1 Answers1