Can we use directives dynamically in agularjs app

I dont understand why do you need dynamic directives. Simple use single directive and change the template accordingly. For example -

 angular.module('testApp')
        .directive('dynamicDirective', function($compile,$templateCache,$http) {
          return {
            restrict: 'C',
            link: function($scope,el) {
                    //get template
                          if(radio){
                        $http.get('radio.html', {cache: $templateCache}).success(function(html){
                         //do the things       

                        el.replaceWith($compile(html)($scope));

                    });
                  } else if(checkbox){
                      //load checkbox template 
                       }  //vice-versa
            }
          };

        });

You can inject service variable in directive also.

Long story short; no you can't load directives dynamically in that way.

There are a few options for what you can do. You can, as other answers have mentioned, pass your context as an attribute (mydir type="checkbox"). You could make a directive that dynamically loads another directive, as also mentioned by others. Neither of these options are imo every good.

The first option only works if you write the directive yourself, not when using something like ionic. It also requires you to write multiple directives as one, which can get very messy very quickly. This mega directive will become hard to test and easy to mess up when maintaining it in the future. Note that this is the correct way to pass data to a directive from the view, it's just not good for this specific use case.

The second option is problematic because obfuscates things a bit too much. If someone reads your html and sees a directive called dynamic that is given dynamic data... they have no idea what is going to happen. If they see a directive called dropdown that is given a list they have a fair idea of what the result will be. Readability is important, don't skimp on it.

So I would suggest something simpler that requires much less work from you. Just use a switch:

<div ng-switch="type">
    <mydir-select ng-switch-when="select"></mydir-select>
    <mydir-checkbox ng-switch-when="checkbox"></mydir-checkbox>
</div>

Yes, that's not a problem. You can interpolate your data using {{}} and in your directive compile a new element using that data:

myApp.directive('dynamic', function($compile, $timeout) {
    return {
        restrict: "E",
        scope: {
            data: "@var" // say data is `my-directive`
        },
        template: '<div></div>',
        link: function (scope, element, attr) {
            var dynamicDirective = '<' + scope.data + ' var="this works!"><' + scope.data + '>';
            var el = $compile(dynamicDirective)(scope);

            element.parent().append( el );
        }
    }
});

HTML:

<div ng-controller="MyCtrl">
    <dynamic var="{{test}}"></dynamic>
</div>

Fiddle

a bit more code would help. I don't know, if its possible to do dynamic directives like the ones in a tag

 <{dyntag}></{dyntag}>

but you also can use an expression like

<your-tag dynamic_element="{type}">...</your-tag>

which should have exactly the same functionality. In your case it would be like:

Your JSObject ($scope.dynamics):

{"radio", "checkbox", "select"}

and your HTML:

<div ng-repeat="dyn in dynamics">
  <your-tag dynamic_element="{dyn}"></your-tag>
</div>