Why Angular custom directive scope effects parent controller scope?
<p>I created a custom directive, which shows a list and select-box. </p>

<p>Please follow the code below,</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;title&gt;Template&lt;/title&gt;

    &lt;script type="text/javascript" src="/home/rahul/Installers/jquery-3.0.0.js"&gt;&lt;/script&gt;   
    &lt;link rel="stylesheet" type="text/css" href="/home/rahul/Installers/Bootstrapv3.0.2/css/bootstrap.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="/home/rahul/Installers/Bootstrapv3.0.2/css/bootstrap-theme.css"&gt;
    &lt;script type="text/javascript" src="/home/rahul/Installers/Bootstrapv3.0.2/js/bootstrap.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="/home/rahul/Installers/angular.js"&gt;&lt;/script&gt;

    &lt;script type="text/javascript"&gt;
        angular.module("app",[]);
        angular.module("app").controller("myctrl",myctrl);
        angular.module("app").controller("childCtrl",childCtrl);
        angular.module("app").directive("loadFilms",loadFilms);

        myctrl.$inject = ["$scope"];
        childCtrl.$inject = ["$scope"];

        function myctrl($scope){
            var vm = this;
            vm.title = "Directive and nested scoping";
            vm.actorName = "Amithabh Bachhan";
            $scope.year = ["70's","80's","90's"];
        }

        function childCtrl($scope){
            var vm = this;

            vm.selectedYear = "";

            vm.moviesObj = {
                "70's" : ["Anand","Lawaris","Kala Pathhar","Deewar","Amar Akbar Anthony","Mili"],
                "80's" : ["Sharabi","Kaalia","Silsila","Satte Pe Satta","Nastik","Shahensha"],
                "90's" : ["Hum","Aaj Ka Arjun", "Ajooba","Khuda Gawah","Ganga Jamuna Saraswati","Lal Badshah"]
            }

            vm.movies = [];

            vm.getMovies = function(){
                vm.movies = vm.moviesObj[vm.selectedYear];
            }
        }

        function loadFilms(){
            return {
                restrict : "EA",
                controller : "childCtrl",
                controllerAs : "vm",
                scope : true,
                template : function(tElem, tAttrs){
                    var str = "&lt;select ng-model='vm.selectedYear' data-ng-options='y as y for y in year' " + "class='form-control' ng-change='vm.getMovies()'&gt;" + 
                    "&lt;option value=''&gt;Select&lt;/option&gt;" + 
                    "&lt;/select&gt;" +
                    "&lt;br /&gt;" + 
                    "&lt;ol class='slide-animate-container'&gt;" + 
                    "   &lt;li class='slide-animate' ng-repeat='m in vm.movies'&gt;{{m}}&lt;/li&gt;"+
                    "&lt;/ol&gt;";
                    return str;
                }
            } 
        }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div ng-app="app" ng-controller="myctrl as vm" class="container"&gt;
        &lt;div class="page-header"&gt;
            &lt;h3&gt;{{vm.title}}&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-6"&gt;
                &lt;div class="page-header"&gt;
                    &lt;h5&gt;{{vm.actorName}}&lt;/h5&gt;                       
                &lt;/div&gt;                      
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-6" load-films&gt;&lt;/div&gt; 
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;     
</code></pre>

<p></p>

<p>The directive "load-films" has its own scope,</p>

<p>The values to the select-box in the directive are passed from the parent scope variable from the enclosing controller "myctrl".</p>

<p>The working example is in the link
<a href="https://jsfiddle.net/rahulshivsharan/knfyz57e/6/" rel="nofollow">Example One</a></p>

<p>Now, once I change the scope of the directive "load-films" to <code>false</code></p>

<p>like </p>

<pre><code> function loadFilms(){
            return {
                restrict : "EA",
                controller : "childCtrl",
                controllerAs : "vm",
                scope : false,
                template : function(tElem, tAttrs){
                    var str = "&lt;select ng-model='vm.selectedYear' data-ng-options='y as y for y in year' " + "class='form-control' ng-change='vm.getMovies()'&gt;" + 
                    "&lt;option value=''&gt;Select&lt;/option&gt;" + 
                    "&lt;/select&gt;" +
                    "&lt;br /&gt;" + 
                    "&lt;ol class='slide-animate-container'&gt;" + 
                    "   &lt;li class='slide-animate' ng-repeat='m in vm.movies'&gt;{{m}}&lt;/li&gt;"+
                    "&lt;/ol&gt;";
                    return str;
                }
            } 
        }
</code></pre>

<p>The values <code>vm.title</code> and <code>vm.actorName</code> of the parent controller don't load in the UI.</p>

<p>Why ?</p>

<p>Ideally <code>vm.title</code> and <code>vm.actorName</code> are in the controller "myCtrl", so how does setting the <code>scope</code> property to <code>false</code> of the directive affect the parent controller variables, as the
variable <code>actorName</code> and <code>title</code> are attached to <code>this</code> not to <code>$scope</code>.</p>

<p>The working example using <code>{.., scope = false,..}</code> is <a href="https://jsfiddle.net/rahulshivsharan/b0gvtjg9/2/" rel="nofollow">here</a></p>