title: Creating a Reusable Component in AngularJS
body: <p>I am new to Stackoverflow. I'm also new to AngularJS. I apologize if I'm not using this correctly. Still, I'm trying to create a UI control with AngularJS. My UI control will look like this:</p>
  
  <pre><code>+---------------------+
  |                     |
  +---------------------+
  </code></pre>
  
  <p>Yup. A textbox, which has special features. I plan on putting it on pages with buttons. My thought is as a developer, I would want to type something like this:</p>
  
  <pre><code>&lt;ul class="list-inline" ng-controller="entryController"&gt;
    &lt;li&gt;&lt;my-text-box data="enteredData" /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button class="btn btn-info" ng-click="enterClick();"&gt;Enter&lt;/button&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Please note, I do <em>not</em> want buttons in my control. I also want the <code>enteredData</code> to be available on the scope associated with child controls. In other words, when <code>enterClick</code> is called, I want to be able to read the value via <code>$scope.enteredData</code>. In an attempt to create <code>my-text-box</code>, I've built the following directive:</p>
  
  <pre><code>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 to somehow call to parent scope here.
      };  
  }]);
  </code></pre>
  
  <p><strong>myTextBox.html</strong></p>
  
  <pre><code>&lt;div ng-controller="myTextBoxController"&gt;
      &lt;input type="text" class="form-control" ng-model="query" placeholder="Please enter..."  /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>entryController.js</strong></p>
  
  <pre><code>myApp.controller('entryController', ['$scope', function($scope) {
    $scope.enteredData = '';
    $scope.enterClick = function() {
      alert($scope.enteredData);
    };
  });
  </code></pre>
  
  <p>Right now, I have two issues. </p>
  
  <ol>
  <li>When <code>enterClick</code> in <code>entryController</code> is called, <code>$scope.enteredData</code> is empty.</li>
  <li>When <code>doSomething</code> in <code>myTextBoxController</code> is called, I do not know how to communicate to entryController that something happened. </li>
  </ol>
  
  <p>I feel like I've setup my directive correctly. I'm not sure what I'm doing wrong. Can someone please point me in the correct direction.</p>