Increment a counter based on number of elements - angularjs

Question

I have a below snippet for showing TABS which is static HTML. But each item would get shown on UI based on some business logic. Based on the number of tabs I need to set a width. For e.g if two tabs are shown then I need to equally divide tabs i.e 50%. when three, it will be 33.3%.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
Using 'ng-class' I can add runtime classes to apply the width but its increasing the complexity and killing the page as I need to apply the same business logic in ng-class.
Rather, I was trying to use ng-init to get the count to check how many tabs are formed.
<ul ng-init="totalTabs=0">
<li ng-init="totalTabs=totalTabs+1">1</li>
<li ng-init="totalTabs=totalTabs+1">2</li>
<li ng-init="totalTabs=totalTabs+1">3</li>
<li ng-init="totalTabs=totalTabs+1">4</li>
</ul>
This doesn't give me the expected count. Do you have any clue or suggestions ?

Answer 1

It's time to use some new features of CSS3. In case you don't know it, there's a new display called flex. It allows a lot of things, and one of them is to give elements the same width, based on their parent's width.
You can find a quick tutorial here, or if you want to be fast :
ul {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: flex-start;
li {
flex: 1 1 auto;
}
}