Edit in JSFiddle

var myApp = angular.module("myApp", []);
myApp.directive('hello', function () {
    var directive = {};
    directive.restrict = 'E'; /* restrict this directive to elements */
    directive.template = "<p>{{greetingTxt}} <strong>{{hello.name}}</strong></p>"; 
    directive.scope = {
        hello: "=user"
    }
    directive.compile = function (element, attributes) {
        element.css("color", "#e53b2c"); // initial configuration
        var linkFunction = function ($scope, element, attributes) {
            $scope.greetingTxt = "Hello & Welcome - "; // data binding
        }
        return linkFunction;
    }
    return directive;
})

myApp.controller("myController", function ($scope, $http) {
    $scope.abhi = {};
    $scope.abhi.name = "Abhimanyu";
    $scope.rohit = {};
    $scope.rohit.name = "Rohit";
});

<div ng-app="myApp" ng-controller="myController">
    <h2>Custom Directives in AngularJS - jCombat</h2>
    <hello user="abhi"></hello>
    <hello user="rohit"></hello>
</div>