Issue with AngularJS ng-repeat - blank results

Question

I'm doing a simple ng-repeat as always but this time it's failing and I can't figure out what's happening...

This is my HTML section:

<p ng-repeat="mow in check.BankDataParent.mows">
    <div class="checkbox">
        <input type="checkbox" ng-model="mow.selected" />
        <label for="checkbox"></label>
    </div>
    <i class="fa fa-exclamation-triangle" 
    style="color:red;"
    title="{{mow.errorInputAmountTitle}}"
    ng-show="mow.selected && mow.errorInputAmountTitle"></i>
    <input type="text" ng-model="mow.inputAmount" size="8" ng-show="mow.selected" />
    {{mow.displayField}}
    <a href="/{{mow.id}}" target="_blank"><i class="fa fa-external-link"></i></a>
</p>

And this is how it's rendering (when I'm doing an inspect element via browser):

<!-- ngRepeat: mow in check.BankDataParent.mows -->
<p ng-repeat="mow in check.BankDataParent.mows" class="ng-scope">
                            </p>
<!-- end ngRepeat: mow in check.BankDataParent.mows -->
<p ng-repeat="mow in check.BankDataParent.mows" class="ng-scope">
                            </p>
<!-- end ngRepeat: mow in check.BankDataParent.mows -->
<p ng-repeat="mow in check.BankDataParent.mows" class="ng-scope">
                            </p><!-- end ngRepeat: mow in check.BankDataParent.mows -->
    <div class="checkbox">
        <input type="checkbox" ng-model="mow.selected" class="ng-pristine ng-untouched ng-valid">
        <label for="checkbox"></label>
    </div>
    <i class="fa fa-exclamation-triangle ng-hide" style="color:red;" title="" ng-show="mow.selected &amp;&amp; mow.errorInputAmountTitle"></i>
    <input type="text" ng-model="mow.inputAmount" size="8" ng-show="mow.selected" class="ng-pristine ng-untouched ng-valid ng-hide">

    <a href="/" target="_blank"><i class="fa fa-external-link"></i></a>
<p></p>

PS: this is how is being parsed when it has 4 elements in check.BankDataParent.mows... All of the

are blanks and only one content at the end, but its empty too (no data)...

Do you know what is happening?

UPDATE Interest thing: I've changed a little my code to:

                    <p ng-repeat="mow in check.BankDataParent.mows">
                        <!-- <input type="checkbox" ng-model="mow.selected" /> -->
                        <div class="checkbox">
                            <input type="checkbox" ng-model="mow.selected" name="cbmow{{mow.id}}" />
                            <label for="cbmow{{mow.id}}"></label>
                        </div>

The rest of the above part remains the same... And the output now is:

<!-- ngRepeat: mow in check.BankDataParent.mows -->
<p ng-repeat="mow in check.BankDataParent.mows" class="ng-scope">
                        <!-- <input type="checkbox" ng-model="mow.selected" /> -->
                        </p>
<!-- end ngRepeat: mow in check.BankDataParent.mows -->
<p ng-repeat="mow in check.BankDataParent.mows" class="ng-scope">
                        <!-- <input type="checkbox" ng-model="mow.selected" /> -->
                        </p>
<!-- end ngRepeat: mow in check.BankDataParent.mows -->
<p ng-repeat="mow in check.BankDataParent.mows" class="ng-scope">
                        <!-- <input type="checkbox" ng-model="mow.selected" /> -->
                        </p>
<!-- end ngRepeat: mow in check.BankDataParent.mows -->
<p ng-repeat="mow in check.BankDataParent.mows" class="ng-scope">
                        <!-- <input type="checkbox" ng-model="mow.selected" /> -->
                        </p>
<!-- end ngRepeat: mow in check.BankDataParent.mows -->
<div class="checkbox">
                            <input type="checkbox" ng-model="mow.selected" name="cbmow" class="ng-valid ng-dirty ng-valid-parse ng-touched">
                            <label for="cbmow"></label>
                        </div>
<i class="fa fa-exclamation-triangle ng-hide" style="color:red;" title="" ng-show="mow.selected &amp;&amp; mow.errorInputAmountTitle"></i>
<input type="text" ng-model="mow.inputAmount" size="8" ng-show="mow.selected" class="ng-pristine ng-untouched ng-valid ng-hide">
<a href="/" target="_blank"><i class="fa fa-external-link"></i></a>
<p></p>

And now I'm wondering about if it's a CSS conflict with the checkbox image?

Here's my CSS:

.checkbox {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: relative;
  cursor: pointer;
  margin: 0px 10px -5px 0;
}
.checkbox input[type="checkbox"] {
  opacity: 0;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1070;
  cursor: pointer;
}
.checkbox label {
  display: block;
  width: 24px;
  height: 24px;
  position: relative;
  border: 1px solid #eee;
  border-radius: 3px;
}
.checkbox input[type="checkbox"]:checked + label {
  background-image: url("../images/icons.png");
}

Answer 1

The issue is because of using ng-repeat in a <p> tag which has a <div> tag as a child element.Please refer to list of elements inside p tag , another similar issue .

When I changed your p tag to div . Its working fine now. Fiddle Demo

    <div ng-repeat="mow in mows">
    </div>

In the fiddle try changing the p to div .The demo will fail to render.The issue here is using div inside p tag as div by default is block level element.