AngularJS - Pass dynamic object value and call function from Directive

Question

Ctlr.js

app.controller('myCtrl', function($scope) {
    $scope.data = {
    waterMarkImgPosition: [
        {id: 'lowerRight', name: 'Lower Right'},
        {id: 'lowerLeft', name: 'Lower Left'},
        {id: 'upperRight', name: 'Upper Right'},
        {id: 'upperLeft', name: 'Upper left'},
        {id: 'center', name: 'Center'}
    ],
    selectedPosition: {id: 'upperRight', name: 'UpperRight'} //This sets the default value of the select in the ui
    };

    $scope.watermarkPosition = $scope.data.selectedPosition.id; //pass default position for watermark


});

Directive.js

app.directive('waterMark', function($timeout) {
    return {
        restrict: 'EA',
        link: function(scope,element,attrbs) {

                scope.videoSnapshotPath = 'img/watermark.png';
                scope.watermarkLogoPath = 'img/logo.jpg';

                //fetch position selected from dropdown
                scope.changePosition = function(imgposition) {

                    scope.watermarkPosition = imgposition.id;

                if(scope.watermarkPosition == 'lowerRight'){

                    $timeout(function() {
                    watermark([scope.videoSnapshotPath, scope.watermarkLogoPath])
                        .image(watermark.image.lowerRight(0.5))
                        .then(function (img) {
                            document.getElementById('lowerRight').appendChild(img);
                        })
                    }, 5);

                }else if(scope.watermarkPosition == 'upperRight'){

                    $timeout(function() {
                    watermark([scope.videoSnapshotPath, scope.watermarkLogoPath])
                        .image(watermark.image.upperRight(0.5))
                        .then(function (img) {
                            document.getElementById('upperRight').appendChild(img);
                        })
                    }, 5);

                }

                }
        }
    }
});

Img Preview

<div class="col-lg-9" data-water-mark id="{{watermarkPosition}}"></div>

Initially div will load with id='upperRight' selected as passed in controller and watermark will set its position accordingly. Now when user selects upperLeft, the position will be passed and bind to div resulting in id='upperLeft'.

1. How do I execute watermark function conditionally based on position selected by user without images getting appended ?
2. If not conditionally, how can I dynamically pass the position selected in watermark.image.upperRight(0.5) and document.getElementById('upperRight').appendChild(img); ?

Watermark Plugin - http://brianium.github.io/watermarkjs/images.html