{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular.js/issues/9651","labels_url":"https://api.github.com/repos/angular/angular.js/issues/9651/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular.js/issues/9651/comments","events_url":"https://api.github.com/repos/angular/angular.js/issues/9651/events","html_url":"https://github.com/angular/angular.js/issues/9651","id":46041274,"number":9651,"title":"Strange issue with $watch on controller with variables set from isolated scope","user":{"login":"Holocene","id":2182425,"avatar_url":"https://avatars.githubusercontent.com/u/2182425?v=3","gravatar_id":"","url":"https://api.github.com/users/Holocene","html_url":"https://github.com/Holocene","followers_url":"https://api.github.com/users/Holocene/followers","following_url":"https://api.github.com/users/Holocene/following{/other_user}","gists_url":"https://api.github.com/users/Holocene/gists{/gist_id}","starred_url":"https://api.github.com/users/Holocene/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Holocene/subscriptions","organizations_url":"https://api.github.com/users/Holocene/orgs","repos_url":"https://api.github.com/users/Holocene/repos","events_url":"https://api.github.com/users/Holocene/events{/privacy}","received_events_url":"https://api.github.com/users/Holocene/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/angular/angular.js/labels/branch:%201.2.x","name":"branch: 1.2.x","color":"bfe5bf"},{"url":"https://api.github.com/repos/angular/angular.js/labels/component:%20$compile","name":"component: $compile","color":"e102d8"},{"url":"https://api.github.com/repos/angular/angular.js/labels/frequency:%20moderate","name":"frequency: moderate","color":"fef2c0"},{"url":"https://api.github.com/repos/angular/angular.js/labels/needs:%20investigation","name":"needs: investigation","color":"444444"},{"url":"https://api.github.com/repos/angular/angular.js/labels/severity:%20regression","name":"severity: regression","color":"e11d21"},{"url":"https://api.github.com/repos/angular/angular.js/labels/type:%20bug","name":"type: bug","color":"000000"}],"state":"closed","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/angular/angular.js/milestones/32","html_url":"https://github.com/angular/angular.js/milestones/1.3.x%20-%20superluminal-nudge","labels_url":"https://api.github.com/repos/angular/angular.js/milestones/32/labels","id":510155,"number":32,"title":"1.3.x - superluminal-nudge","description":"","creator":{"login":"tbosch","id":690815,"avatar_url":"https://avatars.githubusercontent.com/u/690815?v=3","gravatar_id":"","url":"https://api.github.com/users/tbosch","html_url":"https://github.com/tbosch","followers_url":"https://api.github.com/users/tbosch/followers","following_url":"https://api.github.com/users/tbosch/following{/other_user}","gists_url":"https://api.github.com/users/tbosch/gists{/gist_id}","starred_url":"https://api.github.com/users/tbosch/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tbosch/subscriptions","organizations_url":"https://api.github.com/users/tbosch/orgs","repos_url":"https://api.github.com/users/tbosch/repos","events_url":"https://api.github.com/users/tbosch/events{/privacy}","received_events_url":"https://api.github.com/users/tbosch/received_events","type":"User","site_admin":false},"open_issues":23,"closed_issues":338,"state":"open","created_at":"2013-12-10T19:41:50Z","updated_at":"2015-09-13T16:58:02Z","due_on":null,"closed_at":null},"comments":2,"created_at":"2014-10-16T22:03:36Z","updated_at":"2015-09-13T16:58:02Z","closed_at":"2015-09-13T16:58:02Z","body":"Hi,\r\n\r\nI am having a strange issue when creating a custom directive in angular JS. I have created a small sample program that demonstrates the issue:\r\n\r\n    <!DOCTYPE html>\r\n    <html lang=\"en\" xmlns=\"http://www.w3.org/1999/xhtml\" ng-app=\"sample\">\r\n    <head>\r\n        <meta charset=\"utf-8\" />\r\n        <title>Sample</title>\r\n        <script src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js\"></script>\r\n        <script>\r\n            angular.module('sample',[])\r\n            .controller('SampleController', function ($scope) {\r\n                $scope.$watch('evenTest', function (value) {\r\n                    console.log(value ? \"Is Even!\" : \"Isn't Even!\");\r\n                })\r\n            })\r\n            .directive('isValueEven', function ($compile) {\r\n                var directive = {\r\n                    restrict: \"E\",\r\n                    template: \"<input ng-model='searchQuery' />\",\r\n                    scope: {\r\n                        isValueEven: '=',\r\n                    },\r\n                    controller: function ($scope) {\r\n                        $scope.$watch(\"searchQuery\", function (value) {\r\n                            console.log(\"search query changed.\")\r\n                            if (value !== \"\" && value % 2 === 0)\r\n                                $scope.isValueEven = true;\r\n                            else\r\n                                $scope.isValueEven = undefined;\r\n                        })\r\n                    }\r\n                }\r\n\r\n                return directive;\r\n            })\r\n\r\n        </script>\r\n    </head>\r\n\r\n    <body ng-controller=\"SampleController\">\r\n        <is-value-even is-value-even=\"evenTest\"></is-value-even>\r\n    </body>\r\n    </html>\r\n\r\nThere is a small directive and a controller. The directive creates an `input` element. When the user types into the input element, `$scope.$watch('searchQuery',...)` is called. If the input value is even, the `$scope.isValueEven` field on the directive is set to `true`. Otherwise, it is set to `undefined`.\r\n\r\nAt this point the bug arises. We would expect the watch function on the controller to be fired now, and the console to output `Is Even!` or `Isn't Even!` as appropriate. However, this function is not called. When the user presses the key a second time, the function is called twice.\r\n\r\nHere is the console output:\r\n\r\n    [[initial load]]\r\n    Isn't Even!\r\n    search query changed.\r\n    [[user presses '2']]\r\n    search query changed.\r\n    [[user presses '1']]\r\n    Is Even!\r\n    search query changed.\r\n    Isn't Even!\r\n\r\nAs you can see, the watch function is not called as it should be, after the user presses '2'. Instead, it's called once the user presses another key - followed then by another execution of the function.\r\n\r\nThere are two strange workarounds. You can set `isValueEven` to `null` instead of undefined:\r\n\r\n                            if (value !== \"\" && value % 2 === 0)\r\n                                $scope.isValueEven = true;\r\n                            else\r\n                                $scope.isValueEven = null;\r\n\r\nOr, you can bind an element in the HTML to the value of `evenTest`:\r\n\r\n    <body ng-controller=\"SampleController\">\r\n        <is-value-even is-value-even=\"evenTest\"></is-value-even>\r\n        {{evenTest}}\r\n    </body>\r\n\r\nDoing either of these things makes the `watch` function execute as expected.\r\n\r\nThis issue has had me scratching my head for several hours! I was particularly perplexed by how it behaves differently if you have something bound in the HTML. In my actual code, I am using a directive called `system-search` to help me apply typeahead to search fields.\r\n\r\n    <input data-system-search=\"searchSystem\"\r\n            class=\"form-control input-sm\"\r\n            placeholder=\"Find system\" />\r\n    <span class=\"glyphicon glyphicon-ok form-control-feedback\"\r\n            ng-show=\"searchSystem\"></span>\r\n\r\nI tried to remove the glyphicon, and suddenly my search box didn't work anymore!\r\n\r\nI would appreciate any insight on this issue, as I have only been using AngularJs for 2 weeks. Am I using the isolated scopes in directives in an unintended fashion, or is this a legitimate bug?\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/angular/angular.js/issues/comments/139894490","html_url":"https://github.com/angular/angular.js/issues/9651#issuecomment-139894490","issue_url":"https://api.github.com/repos/angular/angular.js/issues/9651","id":139894490,"user":{"login":"petebacondarwin","id":15655,"avatar_url":"https://avatars.githubusercontent.com/u/15655?v=3","gravatar_id":"","url":"https://api.github.com/users/petebacondarwin","html_url":"https://github.com/petebacondarwin","followers_url":"https://api.github.com/users/petebacondarwin/followers","following_url":"https://api.github.com/users/petebacondarwin/following{/other_user}","gists_url":"https://api.github.com/users/petebacondarwin/gists{/gist_id}","starred_url":"https://api.github.com/users/petebacondarwin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/petebacondarwin/subscriptions","organizations_url":"https://api.github.com/users/petebacondarwin/orgs","repos_url":"https://api.github.com/users/petebacondarwin/repos","events_url":"https://api.github.com/users/petebacondarwin/events{/privacy}","received_events_url":"https://api.github.com/users/petebacondarwin/received_events","type":"User","site_admin":false},"created_at":"2015-09-13T16:58:02Z","updated_at":"2015-09-13T16:58:02Z","body":"This is fixed at 1.3.18 (http://plnkr.co/edit/GhhSPYq0fHXBiawOXPQZ?p=preview) and 1.4.5 ( http://plnkr.co/edit/NuadmRrLibBeEayDFobO?p=preview)"}}