Q:

Confuse about angular custom directive scope inherit

I define a custom directive in a controller, I have already define some variable in the controller's $scope.
    myapp.controller('demoController', function ($scope) {
        $scope.userInput = "Hello World";
    });

    myapp.directive('custom', function () {
        return {
            template: '<input type="text" ng-model="userInput" value="{{userInput}}" />'
        }
    });

the html:
    <div controller="demoController">
    <custom></custom>   

I thought the custom directive could inherit the parent contoller's $scope, so it could access to the userInput variable. But when page render out, nothing happened. the input element show nothing.
Should not the custom directive inherit the parent's scope? How can make it right?

A:

change your div to use ng-controller
  <div ng-controller="demoController">

