angularjs - Form object is accessible in the view but not in the controller -

i have custom directive draws form this:

app.directive('customform', function() {      return {     restrict: 'e',     scope : {         data : "="               } ,     replace: true,     controller: ['$scope', '$element', function($scope, $element) {        ............         ................        $scope.submit=function(){         if($scope.formname.$error) {            return         }        }       ........................     }],     ,templateurl: function(element, attr) {       return '/views/directives/custom-form.html';     } 

where custom-form.html has form named formname, issue when access form object form html it's working, in directive controller it's undefined

html:

<div>    formname : {{formname}}     <!-- here object printed correctly of properties ,    , when insert wrong value correctly becomes $invalid true -->    <form novalidate name="formname" id="{{data.active.label}}-container">   ..........   ....................   <button type="button" ng-click="submit()"> submit</button> </div> 

while check in controller:

if($scope.formname.$error) {     return  } 

hits error of

can't read $error of undefined

what going on exactly? how come it's binded on view not on controller?