DOM manipulation by angularjs direction - angularjs-directive

Question

I read that Angularjs directives require a different approach than jquery. I am new to angularjs, so it will be great if somebody can explain how to use directives for this simple example. If you click on bottom div, then it moves (re-parent) the top image to the bottom div. I could add this jquery code on ng-click... but is there a better way?
JQUERY INTENT:
$("#bottom").click(function(){
$("#myimage").appendTo("#bottom");
});
ANGULARJS:
<div ng-app="myapp">
<div data-ng-controller="mycontroller">
<div id="top" style="background-color:red;width:200px;height:200px">
<img id="myimage" src="//placehold.it/150x150">
</div>
<div id="bottom" style="background-color:green;width:200px;height:200px">
</div>
</div>
</div>

Answer 1

Instead of listening for a click in jQuery, you can use Angular's ng-click directive to specify a function to call when the element is clicked and you can use the ng-if directive to add/remove the image, for example...
<div ng-click="appendImage()" id="bottom" style="background-color:green;width:200px;height:200px">
<img ng-if="showImage" id="myimage" src="//placehold.it/150x150">
</div>
Then in your controller...
angular.controller('myController', function ($scope) {
$scope.showImage = false;
$scope.appendImage = function (event) {
$scope.showImage = true;
};
});
A key difference between plain jQuery and Angular is that in jQuery you have to write code to manipulate the DOM yourself (like appending the image). If you use directives properly in Angular, you simply make changes to the $scope and directives will update the DOM for you automatically