Creating a Reusable Component in AngularJS -

i new stackoverflow. i'm new angularjs. apologize if i'm not using correctly. still, i'm trying create ui control angularjs. ui control this:

+---------------------+ |                     | +---------------------+ 

yup. textbox, has special features. plan on putting on pages buttons. thought developer, want type this:

<ul class="list-inline" ng-controller="entrycontroller">   <li><my-text-box data="entereddata" /></li>   <li><button class="btn btn-info" ng-click="enterclick();">enter</button></li> </ul> 

please note, not want buttons in control. want entereddata available on scope associated child controls. in other words, when enterclick called, want able read value via $scope.entereddata. in attempt create my-text-box, i've built following directive:

myapp.directive('mytextbox', [function() {     return {         restrict:'e',         scope: {           entered: '='         },         templateurl: '/templates/mytextbox.html'     }; }]);  myapp.controller('mytextboxcontroller', ['$scope', function($scope) {     $scope.dosomething = function($item) {         $scope.entered = $item.name;          // need somehow call parent scope here.     };   }]); 

mytextbox.html

<div ng-controller="mytextboxcontroller">     <input type="text" class="form-control" ng-model="query" placeholder="please enter..."  /> </div> 

entrycontroller.js

myapp.controller('entrycontroller', ['$scope', function($scope) {   $scope.entereddata = '';   $scope.enterclick = function() {     alert($scope.entereddata);   }; }); 

right now, have 2 issues.

1. when enterclick in entrycontroller called, $scope.entereddata empty.
2. when dosomething in mytextboxcontroller called, not know how communicate entrycontroller happened.

i feel i've setup directive correctly. i'm not sure i'm doing wrong. can please point me in correct direction.

three suggestions you.

1) shouldn't create directive template references controller defined elsewhere. makes directive impossible test in isolation , unclear. if need pass data directive parent scope use isolate scope object on directive bind data (note how directive template doesn't have controller) http://jsfiddle.net/p4ztunko/

myapp.directive('mytextbox', [function () {     return {         restrict: 'e',         scope: {             data: '='         },         template: '<input type="text" class="form-control" ng-model="data" placeholder="please enter..."  />'     }; }]);  myapp.controller('entrycontroller', ['$scope', function ($scope) {     $scope.entereddata = 'stuff';     $scope.enterclick = function () {         alert($scope.entereddata);     }; }]);  <div>     <ul class="list-inline" ng-controller="entrycontroller">         <li>{{entereddata}}             <my-text-box data="entereddata" />         </li>         <li>             <button class="btn btn-info" ng-click="enterclick();">enter</button>         </li>     </ul> </div> 

2) don't obfuscate html when don't need to. 1 of goals of angular make markup more readable, not replace standard elements random custom elements. e.g. if want watch value of input , take action depending on in linking function (note: still not referencing external controller) http://jsfiddle.net/lkz8c5jo/

myapp.directive('mytextbox', function () {     return {         restrict: 'a',         link: function(scope, element, attrs){            function dosomething (val) {               alert('you typed ' + val);            }            scope.$watch(attrs.ngmodel, function (val) {                if(val == 'hello'){                    dosomething(val);                }            });         }     }; });  myapp.controller('entrycontroller', ['$scope', function ($scope) {     $scope.entereddata = 'stuff';     $scope.enterclick = function (data) {         alert('you clicked ' + data);     }; }]);  <div>     <ul class="list-inline" ng-controller="entrycontroller">         <li>{{entereddata}}             <input type="text" ng-model="entereddata" my-text-box />         </li>         <li>             <button class="btn btn-info" ng-click="enterclick(entereddata)">enter</button>         </li>     </ul> </div> 

3) pass data controller functions ui instead of referencing $scope object in function in ng-click="enterclick(entereddata)" makes testing easier because remove $scope dependency method