I am currently working on a reading list based on NLP, where people can search for topics and get relevant and similar documents. I added a checkbox that toggles displaying all the documents. I was watching on the model ‘isSelectAll’
But for some reason the watch was not getting triggered when I clicked on the checkbox. That was almost impossible, I was breaking my head for a few hours and then finally figured out why.
I had a search bar which gets the documents based on query, and before fetch, all the other elements were under ng-if false. This makes those elements render only after getting data.
Turns out, apart from creating the html elements(which makes sense), the two way bindings are also not setup. So if some elements are under ng-if false and later becomes true, the bindings are messed up.
So to overcome this I had to make ng-if to ng-show. But I just thought that ng-if improves performance by not rendering contents till they are needed. Oh well ng-show wins this time.