Dynamic menu icons in different screens

I am developing an application which has menu icons on each page depending on what page it is.
Basically there are 15 menus.

  1. Filter
  2. Sort
  3. Save search result
  4. Delete saved search
  5. Share saved search
  6. Feedback saved search
  7. Save program
  8. Delete program
  9. Share program
  10. Feedback on program
  11. Sort on offline search result
  12. Remove offline saved search
  13. Share on offline saved search
  14. Remove offline program entry
  15. Share offline Program entry

In order to make this work, I check which is the current page and perform some calculations either to display or hide the icons. Previously i called ng-show=“functionname()” , as this ended up in a very slow application i changed the function call to true /false check of a variables inside ng-show.

The question is , is there a better approach for the dynamic menu icons?

Now the true/false checking is done in my appController globally.

Now another issue is the page loads first before actually the menu icon loads. So the the title of the page is already placed before the menu actually shows up. When the menu is shown, it overlaps over the title.

Please see the screenshot.enter link description here


I added code in javascript on ready to give a margin-left. that solved the second issue.