how to monitor text style and format in a contenteditable div?

Question

I have this text editor plunker example the problem is when I click the bold button or any other button the button doesn't show the state of the editable div, I know that could be fixed if I added a class to the button in the ng-mousedown event's function but that won't fix the problem if I click in an area with bold text that should add a class too to the correct toolbar button, maybe I should use somthing like a watcher but to watch what?

Update

OK, I did some digging, I'm trying to watch the position of the caret so I can apply the correct style to a toolbar buttons of a text editor I thought about $watchers but I never used them.
The example that i'm using is from this StackOverflow post there's a Jsfiddle in the post but I made a plunker example with AngularJS that shows how to get the caret position in the contenteditable div.
Is there a better way of doing this like get the DOM tree of the inner contenteditable div then make a map of elements and positions then use the data binding to control the state of the buttons in the toolbar?
Any help, thanks in advance.

Answer 1

I found the Answer in this SO post:

Rather than do all this by hand, the browser has methods to tell you if the current selection or caret is bold, italic or whatever: document.queryCommandState() (MSDN), for binary commands such as a bold and italic, and document.queryCommandValue() (MSDN) for commands with a value, such as font-related commands.