In AngularJS, how does $scope get passed to scope? <p>I'm a bit confused with the use of <strong>$scope</strong> in controllers and of <strong>scope</strong> in directives. Please verify if my understanding is correct (and also provide some alternative ways how to do this).</p> <p>Let's say I have an html:</p> <pre><code>&lt;div ng-controller="app1_Ctrl"&gt; . . . &lt;input type="text" ng-model="value"/&gt; &lt;input type="checkbox" /&gt; &lt;button ng-click="submit()"&gt;&lt;/button&gt; &lt;/div&gt; </code></pre> <p>And my main.js</p> <pre><code>(function() { angular.module('mainApp', ['app1']); })(); </code></pre> <p>And my app1 looks like this (based on official AngularJS documentation <a href="https://docs.angularjs.org/guide/directive" rel="nofollow">here</a>)</p> <pre><code>(function() { var app = angular.module('app1', []); app.controller('app1_Ctrl', ["$scope", function($scope) { . . . }]); app.directive('app1_Dir1', [function() { function link(scope, element, attr) { scope.$watch(attr.someAttrOfCheckBox, function() { // some logic here }); function submit() { // some logic here } } return link; }]); })(); </code></pre> <p>How does $scope.value passed in scope in directive so that I can do some manipulations there? Will ng-click fire the function submit() in the directive link? Is it correct to use scope.$watch to listen for an action (ticked or unticked of course) in checkbox element?</p> <p>Many thanks to those who can explain.</p>