why css margin property value is null in AngularJS

here is my link function for a directive which restrict to EA and transclude is true 

link : function(scope,element,attrs){

            element.ready(function(){
                var myUL = element.find('ul');
                console.log(myUL.css('margin'));  // prints noting in console.
            });
}

my html is 

<body ng-app="nmrApp">
   <div class="app-container">
     <nmr-dir>
      <ul>
          <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 1" alt="" /></a></li>
          <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 2" alt="" /></a></li>
          <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 3" alt="" /></a></li>
          <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 4" alt="" /></a></li>
          <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 5" alt="" /></a></li>

      </ul>
  </nmr-dir>
   </div>
</body>

CSS: its loading from external css file called style.css

.app-container ul{
  margin:0;
  padding:0;
  list-style: none;
}

when i print myUL in console it gives me 

[ul.ng-scope, ready: function, toString: function, eq: function, push: function, sort: function…]

var myUL = angular.element(element.find('ul')); aslo not worked for me. get stacked what i am doing wrong? i also set margin to 0 in my css for this ul in the element

Two things

1) There may be multiple ul elements responding to your find.

Try specifiying with either .eq(index), or an nth child selector.

2) Try wrapping the find in angular.element like so:

 var myUL = angular.element(element.find('ul'));

First off, have you included jQuery? Angular contains a light version of jQuery which doesn't have all the features of jQuery, and computed styles are one of them.

Secondly, if you look here: http://api.jquery.com/css/#css1 it says that shorthand CSS properties aren't supported. You need to use 'margin-top' (or the margin that you're interested in).

Working example:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
    <script>
    angular.module('myApp', []).controller('Ctrl', function($scope) {

    })
    .directive('nmrDir', function() {
        return {
            restrict: 'E',
            transclude: true,
            template: '<div ng-transclude></div>',
            link: function(scope, element, attrs) {
                element.ready(function(){
                    var myUL = element.find('ul');
                    console.log(myUL.css('margin-top'));
                });
            }
        };
    });
    </script>
    <style type="text/css">
    .app-container ul{
        margin: 10px;
        padding: 0;
        list-style: none;
    }
    </style>
</head>
<body ng-controller="Ctrl">
    <div class="app-container">
        <nmr-dir>
            <ul>
                <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 1" alt="" /></a></li>
                <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 2" alt="" /></a></li>
                <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 3" alt="" /></a></li>
                <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 4" alt="" /></a></li>
                <li><a href="#"><img src="http://placehold.it/600x300&amp;text=Image 5" alt="" /></a></li>
            </ul>
        </nmr-dir>
    </div>
</body>
</html>