Create dynamically angled checkbox columns

Question

I’m trying to dynamically create checkbox columns in a dropdown using angular. I use bootstrap. Each checkbox item may or may not have related children.

The solution I found was to put everything inside a div (.col-sm-4, by bootstrap grids system, but the items were not well aligned).

Follow the code and the result of this action: (I put the border in red for easy guidance)

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="font-size:14px; padding: 16px 15px">Tipo peca <span class="caret"></span></a>
    <ul class="dropdown-menu" style="border:1px solid #dcdcdc;border-radius: 3px; width:1000px;">
        <li ng-repeat="result in vm.listAnuncios.anunciosAgrupadosPorTipoPeca">
            <div class="col-sm-4" style="border:1px solid red;">
                <input type="checkbox" ng-click="vm.selectAll($event)" />
                <span class="lbl padding-8" style="color:#8b8b8b; font-size:12px !important">
                    {{result.nome}}
                    <span style="color:#b0b0b0;">{{result.total}}</span>
                </span>

                <ul id="tp_{{result.subTipoPecaId}}">
                    <li ng-repeat="peca in result.pecasAgrupadas" style="margin-left:25px;">

                        <input type="checkbox" ng-click="vm.selectAll($event)" />
                        <span class="lbl padding-8" style="color:rgba(139, 139, 139, 0.88); font-size:12px !important">
                            {{peca.nome}}
                            <span style="color:#b0b0b0;">{{peca.total}}</span>
                        </span>

                    </li>
                </ul>
            </div>
        </li>
    </ul>
</li>

Upshot:

How could I get around this problem?