Edit in JSFiddle

var app=angular.module("myApp", ['ngRoute']);

app.config(function($routeProvider){
    $routeProvider.when('/first', { templateUrl: 'first.html', controller: 'FirstCtrl', controllerAs:'vm' })
                  .when('/second', { templateUrl: 'second.html' })
                  .otherwise({ redirectTo: '/first' });
});

app.controller("FirstCtrl", function(){
    this.name="Ravi";
});

app.controller("SecondCtrl", function(){
    this.name="Ravi";
});

app.directive("helloDir", function(){
    return{
        restrict:'A',
        template:"<span>{{dir.message}}</span>",
        controller:function(){
            this.message="Good Morning!";
        },
        controllerAs:"dir"
    }
});

<div ng-app="myApp">
    <a href="#/first">First</a>
    
    <a href="#/second">Second</a>
    <br />
    <br />
    <div ng-view></div>
    
    <script type="text/ng-template" id="first.html">
        <div>First View, with controller as specified in route</div>
        <br />
        Name: <input type="text" ng-model="vm.name" />
        <div>Welcome, {{vm.name}}</div>
    </script>
    
    <script type="text/ng-template" id="second.html">
        <div ng-controller="SecondCtrl as vm">
            <div>Second View, with controller as specified in the view</div>
            <div>Welcome, {{vm.name}}</div>
            <br />
            <div hello-dir></div>
        </div>
    </script>
    
</div>