diff --git a/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx b/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx
index b01dec61cee..0ef7279c43c 100644
--- a/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx
+++ b/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx
@@ -52,7 +52,10 @@ export class AngularEditorLoader extends React.PureComponent<Props> {
     }
 
     const loader = getAngularLoader();
-    const template = `<plugin-component ng-if="!ctrl.currentDatasource.annotations" type="annotations-query-ctrl"> </plugin-component>`;
+    // NOTE: BE CAREFUL HERE
+    // If this template contains an ng-if, then it won't be removed correctly by AngularLoader.
+    // The compiledElem will only contain the single comment node (e.g. <!-- ngIf !ctrl.currentDatasource.annotations -->)
+    const template = `<plugin-component type="annotations-query-ctrl"> </plugin-component>`;
     const scopeProps = {
       ctrl: {
         currentDatasource: this.props.datasource,