Directive Scop false

No directive scope

by rahulshivsharan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css">
<div ng-app="app" ng-controller="myctrl as vm" class="container">
			<div class="page-header">
				<h3>{{vm.title}}</h3>
			</div>
			<div class="row">
				<div class="col-md-6">
					<div class="page-header">
						<h5>{{vm.actorName}}</h5>						
					</div>						
				</div>
			</div>
			<div class="row">
				<div class="col-md-6" load-films></div>	
			</div>
</div>

JavaScript

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 = "<select ng-model='vm.selectedYear' data-ng-options='y as y for y in year' " + "class='form-control' ng-change='vm.getMovies()'>" + 
						"<option value=''>Select</option>" + 
						"</select>" +
						"<br />" + 
						"<ol class='slide-animate-container'>" + 
						"	<li class='slide-animate' ng-repeat='m in vm.movies'>{{m}}</li>"+
						"</ol>";
						return str;
					}
				} 
			}