Issue with checkbox two way binding

Hi i am developing web application in angularjs. I am creating checkbox's using for loop. It is creating checkboxe's. In the object i have property ischecked which holds either true or false. Whenever ischecked is true checkbox should be checked. Later user can check other checkbox's. Below is my code.

 <div class="checkbox" id="checkboxes" *ngFor="let rolename of roles; let i = index">
        <input type="checkbox"
        name="rolename.rolename"
        value="rolename.roleid"
        [checked]="rolename.ischecked"/>
        
        
 </div>

In firt scenario, when ischecked is true corresponding checkbox should be checked. This works fine using the above code. But whenever i check other checkbox's then only previously checked checkbox i will get checked(ischecked i will get true). In the second scenario if i put [(ngModel)]="rolename.ischecked" and remove [checked]="rolename.ischecked" then if i check on any other checkbox's corresponding ischecked i will get true but whenever page loads first time if there is any ischecked set to true then checkbox will not be checked on display. I want to handle these both scenario's. May i know what s the correct way to do this? Any help would be appreciated. Thank you.