AngularJS Populating input field with directive but not captured in $scope - angularjs

Question

When I populate an input field from within a directive, it shows on the DOM, but $scope is not capturing the value. How do I fix it so that $scope captures the new info?
How to reproduce the behaviour from my Fiddle:
Click Fill with Directive
Click Log
--> $scope.input val is undefined
Fill input with 'asdf'
Click Log
--> $scope.input val is 'asdf'
Fill input with 'abcd'
Click Fill with Directive
--> DOM shows 'quick brown fox'
Click Log
--> $scope.input val is 'abcd'
My code is here: JSFiddle
JS:
'use strict';
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.logResult = function(){
console.log($scope.input);
}
});
app.directive('fillInput', function(){
return {
link: function($scope, elem){
$scope.fillFormDirective = function() {
console.log(elem);
elem.val('quick brown fox');
}
}
};
});
HTML:
<div ng-controller='myCtrl'>
<div>
<input type="text" ng-model="input.weird" id="inputField" fill-input />
</div>
<div>
<button ng-click="fillFormDirective()" >Fill With Directive</button>
</div>
<div>
<button ng-click="logResult()">Log Result</button>
</div>
</div>

Answer 1

There is a problem with the code you posted:
In your link function your scope should be scope NOT $scope.
If you want 2 way binding between you controller and the directive, you need to pass in a variable through an isolate scope. However with an isolate scope the fillFormDirective() method won't be called if it is declared on elements that don't have the fill-input directive on them.
Try this:
app.directive('fillInput', function(){
return {
scope:{
fillInput:'='
}
link: function(scope, elem){
elem.val(scope.fillInput);
elem.bind("click", function(e){
console.log(elem);
elem.val('quick brown fox');
});
}
};
});
And your HTML:
<input type="button" fill-input="text" />
See working plunk.
EDIT I've updated the plunk to not make use of an isolate scope.

Answer 2

Solution from this SO thread:
Update Angular model after setting input value with jQuery
Working Plunkr:
http://plnkr.co/edit/QKDaHT3CllyBtrRPdYUr?p=preview
Basically, quoting #Stewie,
ngModel listens for "input" event, so to "fix" your code you'd need to trigger that event after setting the value:
elem.bind("click", function(e){
console.log(elem);
newElem.val('quick brown fox');
newElem.triggerHandler('input'); <-----This line of code fixed the problem
});