My Index.html looks like :::

<!DOCTYPE html>
<html ng-app="myModule">
<head>
    <title>Dom Magic</title>   
    <script src="lib/jquery-1.9.1.min.js"></script>
    <script src="lib/angular.min.js"></script>
    <script type="text/javascript" src="dom.js"></script>
    <link rel="stylesheet" href="styles/dom.css">
</head>
<body>
<my-widget>
    <div id="one" class="RedBox"></div>
    <div id="two" class="GreenBox"></div>
</my-widget>
</body>
</html>

After running this WebApp , We will see the UI like this Image …

Blog

My dom.css has this style :::

.RedBox
{
    position: relative;
    background-color: RED;
    width: 100px;
    height: 100px;
    float: left;
    margin: 5px;
    cursor: pointer
}

.GreenBox
{
    position: relative;
    background-color: GREEN;
    width: 100px;
    height: 100px;
    float: left;
    margin: 5px;
    cursor: pointer
}

My dom.js has the directive (Custom HTML Tag) which is used at index.html page .

var myModule = angular.module('myModule',[]);

myModule.directive('myWidget', function () {
    linkFn = function (scope, element, attrs) {

        var boxOne = element.children()[0];
        var boxTwo = element.children()[1];

        var animateRight = function () {
            $(this).animate({
                left: '+=50'
            })
        }

        var animateDown = function () {
            $(this).animate({
                top: '+=50'
            })
        }

        $(boxOne).click(animateDown);
        $(boxTwo).click(animateRight);
    };

    return {
        restrict: 'E',
        link: linkFn
    }
});

AngularJS

AngularJS – DOM Manipulation With Custom Directive and jQuery Animation

Image