angularjs Unable to update the directive on drop down list change

Question

Unable to update the directive on drop down list change using anuglar js . Here is my app code

html code

<div ng-app="myApp" ng-controller="MyCtrl">
    <select ng-model="opt" ng-options="font.title for font in fonts" ng-change="change(opt)">
    </select>
    <p>
        {{opt}}</p>
    <br />
    <h3>
        Text Is
    </h3>
    <div id="tstDiv" testdir ct="ct">
    </div>
</div>

Controller and directive code

angular.module("myApp", []).controller("MyCtrl", function ($scope) {
        $scope.fonts = [
    { title: "Arial", text: 'Url for Arial' },
    { title: "Helvetica", text: 'Url for Helvetica' }
];
        $scope.opt = $scope.fonts[0];
        $scope.change = function (option) {
            $scope.opt = option;
        }
    })
        .directive("testDir", function ($timeout) {
            return {
                restrict: 'A',
                scope: {
                    ct: '=ct'
                },
                link: function ($scope, $elm, $attr) {
                    document.getElementById('tstDiv').innerHTML = $scope.selectedTitle;
                }
            };
        });

Here is the fiddle http://jsfiddle.net/Cbqju/

Answer 1

It looks like you'll want to $watch for a change in that variable Your link function should look something like

scope: {
    ct: '=ct',
    opt: '=opt'
},
link: function ($scope, $elm, $attr) {
    $scope.$watch('opt', function(newOpt, oldOpt) {
        document.getElementById('tstDiv').innerHTML = newOpt.title;
    });
}

Answer 2

根据@Ajaybeniwal的评论，这里是工作中的朋克