Recognizing and Repairing a Broken Mental Model

Perhaps you’re familiar with this scenario: you’re debugging and stuck. You’ve Googled, read some blog posts and docs. You return to your search engine, type some characters, and then something strange happens: the search engine autocompletes your question, and the results are all purple because they have been visited by you. I’ve come to recognize this moment as always a symptom of a broken mental model.

A broken mental model is a fundamentally flawed understanding of how something works. It derails problem-solving by leading us to ask bad questions. Bad questions beget bad answers.

Real-World Example: The Mysterious Angular Function

A real example from my recent work was learning how Angular.js handles reactivity.

I had an Angular callback function, being called from two different locations in the code. Same arguments, different behavior.

When the user clicks a button in the first context, the function is called and a modal appears. That same action in the second context also calls the function, but then: no modal! Shouldn’t a function, called twice with identical arguments, produce the same results? I was promised this behavior.

I spent way too long typing half-baked questions into Google like “Angular state not updating” and “Angular watch delay on scope change.” Never finding anything close to an answer.

After marinating in this state, I had my epiphany. My mental model was broken.

What To Do

When you arrive at this realization, return to first principles. Stop programming, and start explaining your thoughts to someone else. If you don’t have other people, start reading the official docs for the tool that’s giving you problems. You might not start off on the right documentation page, but keep reading and you’ll get there. Build a correct mental model.

In my case, I opened the Angular docs and started reading about Angular’s reactivity model. Not the irrelevant React or Vue reactivity I knew well, but Angular reactivity.

I soon learned about the Angular digest cycle, a core idea of that framework. Angular has a series of built-in functions called directives, which handle events like clicks. When one of those directives is called, the framework reacts in a process called the digest cycle. It happens automatically, except when state changes outside of a directive, because Angular can’t know about those changes. That second function call, the one failing to produce a modal, was outside the digest cycle!

Once I had a correct mental model, I found two conventional solutions: manually triggering the digest cycle with $apply, or moving the second call inside a directive. I chose the former.

The moment I started thinking correctly about the system, the answer appeared.

Mandatory AI Paragraph

As an aside, I’ve found that AI programs like Chat GPT are great at helping with these kinds of problems. Given the right level of detail, they see right into your blind spot.

For the example above, which I solved before Chat GPT was released, I feel confident if I pasted the function code, the two places it was called from (filtering irrelevant information), and the modal-triggering logic, that Chat GPT would have noisily suggested I look into the digest cycle.

Conclusion

I hope this post helps you learn to recognize broken mental model and provides a path forward.

• Debugging
• Ai