Issue with multiple child HTML elements using Directives in AngularJS

I'm using a template to create a popup menu that will show alerts if there is a new one and it's working till now. But i wanted to add manual alert, that's why i thought to add an input text but Oupss, i can't write on the input field and i don't even know why.

My directive is like so :

$scope.tb = { x: 0, y: 0 };

module.directive('myDraggable', function ($document, $interval) {
return {
    restrict: 'EA',
    replace: true,
    //scope : true,
    scope: { menu: '=drSrc'},
    link: function (scope, element, attr) {

        var startX = 0, startY = 0, x = scope.menu.x || 0, y = scope.menu.y || 0, positionX = [], positionY = [], time = [], width, height, moveInterval;

        element.draggable({
            position: 'relative',
            cursor: 'pointer',
            top: y + 'px',
            left: x + 'px'
        });

        element.on('mousedown', function (event) {

            // Prevent default dragging of selected content
            event.preventDefault();
            startX = event.pageX - x;
            startY = event.pageY - y;
            $document.on('mousemove', mousemove);
            $document.on('mouseup', mouseup);
            $interval.cancel(moveInterval);
        });

        function mousemove(event) {
            y = event.pageY - startY;
            x = event.pageX - startX;
            //calculate the borders of the document 
            width = $(document).width() - 350;
            height = $(document).height() - 150;
            positionX.push(x);
            positionY.push(y);
            time.push(Date.now());
        }
    }
}
 });

I tried to make scope true but i faced 2 problems, : I can't move my popup anymore (yes my popup menu is Draggable) And Also the input text does not show my text i'm typing.

Here's my cache template :

    $templateCache.put('control.tpl.html', '<div class="container" my-draggable dr-src="tb"><div><div class="col-sm-1 col-md-1 sidebar"><div class="list-group" ><span href="#" class="list-group-item active" >Manage<input type="text" class="pull-right" placeholder="Type..." /></span><div ng-repeat="Alert in Alerts"><a href="#" ng-click="showLocation(Alert.id)" class="list-group-item" >Alert {{Alert.id}}</span><img src="../images/alert_icon_manage.png"  class="pull-right"/> </a></div><span href="#" class="list-group-item active"></span></div></div></div></div>');

I'm new with AngularJS and Directive and I don't know how to solve this but I think it's a problem with Scopes!! Thank you