initialising using ng-init

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="demoController" ng-init="init()">
    <h1>Confused directives!!!</h1>
    <my-user userName="{{user.name}}"></my-user>
    <br>
    {{user.name}}
  </body>

</html>

// Code goes here

(function(){
	'use strict';
	var app = angular.module('app', []);


	app.controller('demoController', ['$scope', demoController])

	function demoController($scope){
		console.log('Im in the controller');
		$scope.init = function (){
			$scope.user = {
				name: 'Argo'
			}
			console.log('Im in init method of controller')
		}
	}

	app.directive('myUser', myUser);

	function myUser(){
		return {
			restrict: 'AE',
			replace: true,
			scope: {
				userName: '@'
			},
			template: '<div><b>{{userName}}	is defined from init method	</b></div>',
			link: function(scope, ele, attr){
				console.log('Im in link method of directive');
				console.log('this is loaded' + scope.userName);
				attr.$observe('userName', function(newValue){
					console.log(newValue);
				})
			}
		}
	}
})();

/* Styles go here */