Access ng-model created via an isolate scope in Angular

Question

I have a simple directive using isolate scope which passes data to a scoped method from within the template:

app.directive("phone", function () {
    return {
      scope: {
        dial: "&"
      },
      template: '<input type="text" ng-model="value">' +
        '<br>' +
        '<div class="button" ng-click="dial({message:value})">' +
        'Call home!</div>',
      controller: function($scope) {
        console.log($scope);
      }
    };
  });

Works fine. But I'd like to clear the input field after the alert has been completed. I'm having a hard time figuring out how I can access ng-model="value" on that input that is generated from within the directive. Any help?

Here's a plunk for you

Answer 1

change the template to this

template: '<input type="text" ng-model="value">' +
        '<br>' +
        '<div class="button" ng-click="dial({message:value}); value = \'\' ">' +
        'Call home!</div>',

note that ng-click is changed to ng-click="dial({message:value}); value = \'\' "

this will sets the value to empty string after calling the dial() function.

here is the demo

or you can try something this, but seems like first one is the better one.