Using ng-model within a directive

Question

I've got a custom defined directive in angularjs. Basically what I want to happen is the user will pick a value from a select box and that will append a value to an array. This causes my custom directive to be invoked and render a new element on the screen. I want the text field that the directive generates to bind to the controller's attribute.

Html

<device-list ng-repeat="device in devices" key="device.key" display-name="device.display_name" bind-prefix="descriptions"></device-list>

Directive

angular.module('device_list_tag', []).
  directive('deviceList', function() {
    return {
      restrict: 'E',
      require: '?ngModel',
      scope: {
        devices: '=',
        key: '=',
        displayName: '=',
        bindPrefix: '@'
      },
      link: function(scope, element, attrs) {

        var deviceListElement = $(element)
        var containerDiv = $('<div>')
          .addClass('row')


        var labelTag = $('<label>').text(scope.displayName)
          .addClass('span1')

        var bindField = attrs.bindPrefix+'.'+scope.key

        var textField = $('<input>')
          .addClass('span3')
          .attr('ng-model', bindField)

        containerDiv.append(labelTag)
        containerDiv.append(textField)

        deviceListElement.append(containerDiv)
      }
    }
  })

Controller

function DevicesCtrl($scope) {
  descriptions = {}
}

It appears as though as ng-model is local to the directive's scope, how do I make it apply to the parent? If I have a bunch of text fields on the page like

<input ng-model="descriptions.test"/>

It works works except with the fields generated by the select box.

Answer 1

Ok, I figured it out. It involved passing in my parent attribute as '=' (suggested by Tosh). I also had to make a call to $compile to make it recognize the ng-model directive. Here's the full code, I'm sure there's a way to do this cleaner but I'm just glad to have it working.

angular.module('device_list_tag', []).
  directive('deviceList', function($compile) {
    return {
      restrict: 'E',
      scope: {
        devices: '=',
        key: '=',
        displayName: '=',
        bindAttr: '=' // added
      },
      link: function(scope, element, attrs) {

        console.log(scope)

        var deviceListElement = $(element)
        var containerDiv = $('<div>')
          .addClass('row')


        var labelTag = $('<label>').text(scope.displayName)
          .addClass('span1')

        var bindField = 'bindAttr.'+scope.key

        var textField = $('<input>')
          .addClass('span3')
          .attr('ng-model', bindField)

        $compile(textField)(scope) // added

        containerDiv.append(labelTag)
        containerDiv.append(textField)

        deviceListElement.append(containerDiv)
      }
    }
  })