Angularjs directive not working as expected

Question

I quite new to angularjs so this might sound trivial.What i'm tring to accomplish is that initially an image and a button is displayed on the page.When the user clicks on the button another image also appears on the page.

Here is my html code

    <div ng-app="test">
<hello>
    <pane>
    </pane>
</hello>
</div>

My angular js directive is

    angular.module('test', []).directive('hello', function() {
    return {
        restrict : 'E',
        template : '<div style="position: relative"><input name="Add" type="submit" ng-click="AddMarker()" ><img src="http://www.india-travelinfo.com/india-maps/india-map.jpg" /></div>',
        replace: true,
        link : function(scope, element, attrs) {
                 $("#mr").draggable();
        },
        controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

        this.addPane = function(pane) {
          if (panes.length == 0) $scope.select(pane);
          panes.push(pane);
        }
      }
    };
}).
 directive('pane', function() {
    return {
      require: '^hello',
      restrict: 'E',
      transclude: true,
      scope: { title: '@' },
      link: function(scope, element, attrs, tabsCtrl) {
        tabsCtrl.addPane(scope);
      },
      template:
        '<img id="mr" class="drag-image" src="http://www.mbs.edu/i/gmap_marker_default.gif" style="position: absolute;" />',
      replace: true
    };
  })

Can any one point out what may be wrong with this directive.Here is a jsfiddle

Answer 1

Actually, I think you're getting too deep into the directive. The functionality that you want to build is really just straight Angular, and doesn't need a directive. Try this (fiddle updated):

<div ng-app="test" ng-controller="mapController">
    <div style="position: relative">
        <button name="Add" type="button" ng-click="showMarker = true">Show Marker</button>
        <img src="http://www.india-travelinfo.com/india-maps/india-map.jpg" />
        <img id="mr" ng-show="showMarker" class="drag-image" src="http://www.mbs.edu/i/gmap_marker_default.gif" style="position: absolute;" />
    </div> 
</div>

Controller:

angular.module('test', [])
.controller('mapController', function ($scope) {

})

http://jsfiddle.net/SfFub/3/