You could use ng-style with a function and parse the selector of the div to copy:
<script type="text/javascript">
var myApp = angular.module('myApp',[])
myApp.controller('myController'['$scope',function($scope){
$scope.getHeight = function(selector){
var element = $(selector);
return "height:"+element.css("height")+";";
};
}]);
</script>
<div class="border_box"></div>
<div id="MainDiv" ng-style="getHeight('.border_box')">
<div id="ObjAccordian" ng-repeat="guide in GuideDetails" init="refresh();">
---my code
</div>
</div>
I eventually ended up putting a lot of this sort of thing into a service which I call pretty often. I use very customizes Bootstrap so things don't always line up.
Just to show you, this is my service:
angular.module("HtmlStyleModule", [])
.service("styleService", [
function () {
this.getStyleWidth = function (element) {
if (element) {
if (element.element)
if (element.element.css("padding")) {
var a = element.element.css("padding").match(/\d+(\.(\d)+)?/)[0];
var b = element.element.css("width").match(/\d+(\.(\d)+)?/)[0];
return { "width": (b - (a * 2)) + "px" };
}
}
return "";
}
}
]);
I use this one directive defined elements, which is why I don't use the selector method:
<div kendo-window="confirmMoneyPageAdd" k-title="'Add MoneyPage'" k-width="1000" k-height="600" k-visible="false" k-modal="true">
--my fields
<div class="btn-group btn-group-justified btn-bottom" ng-style="getStyleWidth(confirmMoneyPageAdd)">
<div class="btn btn-default" data-ng-click="winAddMoneyPageClick()">Confirm (Add new)</div>
<div class="btn btn-default" data-ng-click="confirmMoneyPageAdd.close()">Cancel</div>
</div>
</div>
I hope you find that helpful ^_^
Andy
UPDATE: I was trying to be too much of a smart arse. here is the simple solution:
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function ($scope) {
$scope.GuideDetails = [1, 2, 3, 4, 5];
angular.element(document).ready(function () {
$('.border_box').css('height', $('#MainDiv').height());
$scope.$apply();
});
}]);
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div class="border_box"></div>
<div id="MainDiv">
<div id="ObjAccordian" ng-repeat="guide in GuideDetails" init="refresh();">
<input type="text" />
</div>
</div>
</body>