Значение переменной не передается внутри функции

Question

У меня есть функция, которая по какой-то причине не работает должным образом. В моем приложении AngularJS мне нужно манипулировать CSS с помощью jqLite.

Допустим, есть два элемента div, и первый имеет определенную ширину.

<div class="primary-item"></div>
<div class="secondary-item"></div>

Я хочу, чтобы ширина вторичного элемента была такой же, как и у основного.

Все идет хорошо до того момента, когда функция меняет CSS. Похоже widthToSet значение не прошло там.

secondaryItem.css({width: + widthToSet + 'px', height: '100px'});

Пожалуйста, смотрите код в фрагменте ниже.

function changeCss() {
    var masterItem = angular.element( document.querySelector( '.primary-item' ) );
    var widthToSet = angular.element( masterItem.prop('offsetWidth') );
    alert("width to set is" + widthToSet);
    var secondaryItem = angular.element( document.querySelector('.secondary-item') );
    secondaryItem.css({width: + widthToSet + 'px', height: '100px'}); /*width is not being set*/
    //secondaryItem.css({width: '300px', height: '100px'}); /*works fine*/
}

angular.element(document).ready(function () {
  changeCss();
});

.primary-item {border: 1px solid red; padding: 10px;}
.secondary-item {border: 1px solid green; padding: 10px;}
.primary-item, .secondary-item {float: left; clear: both; margin-bottom: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div class="primary-item">Some content here</div>
<div class="secondary-item"></div>

Спасибо!

Answer 1

Спасибо @Hacketo за помощь.

Проблема была в декларации widthToSet переменная.

function changeCss() {
    var masterItem = angular.element( document.querySelector( '.primary-item' ) );
    var widthToSet = masterItem.prop('offsetWidth');
    var secondaryItem = angular.element( document.querySelector('.secondary-item') );
    secondaryItem.css({width: + widthToSet + 'px', height: '100px'}); 
}

angular.element(document).ready(function () {
  changeCss();
});

.primary-item {border: 1px solid red; padding: 10px;}
.secondary-item {border: 1px solid green;}
.primary-item, .secondary-item {float: left; clear: both; margin-bottom: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div class="primary-item">Some content here</div>
<div class="secondary-item"></div>