javascript - AngularJS : Two-Way Binding an Unknown Property Inside a Directive -

i've built directive creates markdown-friendly text editor. used @ various places throughout site, anywhere end user wants use markdown basic content styling (product descriptions, sort of thing). challenge directive deployed in multiple places, won't editing same property on every model. example, in 1 spot may edit longdescription of product, whereas in spot may edit shortdescription of ad campaign, or bio of user.

i need able pass in property want edit directive using scope '=' method permits two-way data binding, property changed both in directive , on original controller, allowing user save changes. problem i'm having if pass property directive:

<markdown-editor model="product.description"></markdown-editor> 

two-way data binding doesn't work, since passes value of description property. know '=' method two-way bind in directive, have pass object attribute value html. can pass entire object:

<markdown-editor model="product"></markdown-editor> 

and access description property within directive:

<textarea ng-model="model.description"></textarea> 

but hardcodes description directive, , may not want property.

so question is, how can two-way bind single property of object, without directive knowing ahead of time property is? i've come workaround it's pretty ugly:

html:

<markdown-editor model="contest" property="description"></markdown-editor> 

directive js:

angular.module('admin.directives').directive('markdowneditor', [     'admin.constants.templateconstants',     '$sce',     function (templates, $sce) {         var directive = {             restrict: 'e',             replace: true,             templateurl: templates.directives.markdowneditor,             scope: {                 model: '=',                 property: '@'             },             controlleras: 'markdowneditor',             controller: markdowneditorcontroller         }          function markdowneditorcontroller($scope) {             var vm = this;             vm.display = { markdown: true };             vm.content = { markdown: '', html: '' };               console.log($scope.model);              vm.setdisplay = function (type) {                 vm.display = {};                 vm.display[type] = true;             }              $scope.$watch('model', function (newmodel, oldmodel, $scope) {                 vm.content.markdown = $scope.model[$scope.property];             });              $scope.$watch('markdowneditor.content.markdown', function (newdescription, olddescription, $scope) {                 $scope.model[$scope.property] = newdescription;                 if (newdescription !== "" && newdescription !== null && newdescription !== undefined) {                     vm.content.html = $sce.trustashtml(marked(newdescription));                 }             });         }          return directive;     } ]); 

relevant part of directive template:

<textarea class="ad-basic-input" ng-model="markdowneditor.content.markdown" ng-if="markdowneditor.display.markdown"></textarea> 

notice directive uses watch changes on content.markdown field, pushes model[property] manually (the second $watch near bottom). has $watch changes model being passed in controller above because that's being loaded asynchronously, , needs assigned content.markdown field initially.

this code works, having these 2 watches, 1 looks changes on model, seems big code smell me. surely there must better way pass in, edit, , two-way bind single property of object on controller, when property unknown?

thanks!