title: Properly applying scope in a custom directive to a child element in AngularJS
body: <p>So I have this custom directive: </p>
  
  <pre><code>function numberPickerDirective() {
          return {
              template: template,
              replace: 'true',
              restrict: "E",
              scope: {
                  id: "@",
                  name: "@",
                  model: "=",
                  value: "@",
                  min: "@"
              },
  
          }
      }
  </code></pre>
  
  <p>And my template looks like this:</p>
  
  <pre><code>&lt;div class="number-picker"&gt;
  
      &lt;input id="{{id}}" name="{{name}}" ng-model="{{model}}"
          ng-value="{{value}}" value="{{value}}" min="{{min}}" required
          type="number" /&gt;
  
      &lt;div class="number__controls"&gt;
          &lt;button class="number__control-btn up-icon"&gt;
              &lt;svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd"&gt;
                  &lt;path d="M10 5L5 0 0 5z"&gt;&lt;/path&gt;
              &lt;/svg&gt;
          &lt;/button&gt;
  
          &lt;button class="number__control-btn down-icon"&gt;
              &lt;svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd"&gt;
                  &lt;path d="M10 0L5 5 0 0z"&gt;&lt;/path&gt;
              &lt;/svg&gt;
          &lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my view, I'm applying the directive with:</p>
  
  <pre><code>&lt;number-picker 
      id="inteval"
      name="SizeSec"
      ng-model="m.SizeSec"
      value="30"
      min="1"
      required
      type="number"
      /&gt;
  </code></pre>
  
  <p>The issue is that all of my scope variables are being applied to the top level div, when I want them to be applied to the input tag. Can anyone explain why this is happening and how to fix it?</p>