<div class="parent">
    <div class="child" ng-repeat="item in c.stage track by $index">
      <div class="at-work-process position-relative overflow-hidden text-center">
        <div class="at-work-process-text">
          <span class="at-work-process-number">{{$index+1}}</span>
          <span class="at-work-process-number-text">{{item.workflow_stage}}</span>
          <div class="at-separator-thick"></div>
        </div>
        <div ng-click="showDetails(item)" class="at-work-process-details">
          <div ng-if="!c.allComplete">
            <i class="material-icons" style="color:#F44336;">error</i>
            <span ng-if="c.incompleteCounter > 1">Incomplete <br/> {{c.incompleteCounter}} Tasks Require Your Attention</span>
                        <span ng-if="c.incompleteCounter == 1">Incomplete <br/> {{c.incompleteCounter}} Task Require Your Attention</span>
          </div>
          <div ng-if="c.allComplete" >
            <i class="material-icons" style="color:#4CAF50;">check_circle</i>
            <span>Complete</span>
          </div>
        </div>
      </div>
    </div>
  </div>

      <div ng-show="tasksDiv" class="text-center tasksDiv">
        <h3>{{active_workflow}} Tasks:</h3>
        <ul style="list-style:none; padding-left:0; display:inline-block">
          <li ng-repeat="tasks in active_tasks track by $index" style="display:flex; align-items:center;">
            <i class="material-icons" style={{tasks.style}}>{{tasks.icon}}</i><a href="{{tasks.url}}" target="_blank">{{tasks.short_description}}</a>
          </li>
        </ul>
      </div>