The <group-list> directive attempted to update itself in
response to a group change notification without triggering
a full digest cycle by using `$scope.$apply`.

This was based on the incorrect understanding that $apply only
dirty-checks the current scope downwards. In fact, in dirty-checks
the root scope. Additionally, the logic was pointless since
group list/focus changes happen in response to two types of events,
both of which are triggered in the context of $apply:

 * An event handler when the user selects a group

 * A callback from angular-websocket when a WebSocket message
   is received.

h/static/scripts/app-controller.coffee

@@ -48,7 +48,7 @@ module.exports = class AppController

    # Reload the view when the focused group changes or the
    # list of groups that the user is a member of changes
    reloadEvents = [events.USER_CHANGED, events.GROUP_FOCUSED];
    reloadEvents = [events.USER_CHANGED];
    reloadEvents.forEach((eventName) ->
      $scope.$on(eventName, (event, data) ->
        if !data || !data.initialLoad

h/static/scripts/app.coffee

@@ -16,15 +16,13 @@ resolve =
    'annotationMapper', 'drafts', 'threading'
    (annotationMapper,   drafts,   threading) ->
      # Unload all the annotations
      idTable = threading.idTable
      annotations = (message for id, {message} of idTable when message)
      annotationMapper.unloadAnnotations(annotations)
      annotationMapper.unloadAnnotations(threading.annotationList())

      # Reset the threading root
      threading.createIdTable([])
      threading.root = mail.messageContainer()

      # Thread all the drafts
      # Reload all unsaved annotations
      threading.thread(drafts.all())

      return threading

h/static/scripts/directive/annotation.coffee

@@ -1,5 +1,7 @@
### global -validate ###

events = require('../events');

STORAGE_KEY = 'hypothesis.privacy'

# Validate an annotation.
@@ -51,6 +53,7 @@ AnnotationController = [
   drafts,   flash,   permissions,   tags,   time,
   annotationUI,   annotationMapper,   session,   groups,   localStorage) ->

    # @annotation is the view model, containing the unsaved annotation changes
    @annotation = {}
    @action = 'view'
    @document = null
@@ -59,6 +62,8 @@ AnnotationController = [
    @isSidebar = false
    @timestamp = null

    # 'model' is the domain model, containing the currently saved version
    # of the annotation
    model = $scope.annotationGet()

    # Set the group of new annotations.
@@ -193,7 +198,8 @@ AnnotationController = [
    # @description Switches the view to an editor.
    ###
    this.edit = ->
      drafts.add model, => this.revert()
      if !drafts.get(model)
        updateDraft(model)
      @action = if model.id? then 'edit' else 'create'
      @editing = true
      @preview = 'no'
@@ -228,6 +234,14 @@ AnnotationController = [
          domainModel, viewModel,
          {tags: (tag.text for tag in viewModel.tags)})

    updateDraft = (draft) ->
      # drafts only preserve the text and tags for the
      # annotation, changes to other properties are not preserved
      drafts.update(model, {
        text: draft.text
        tags: draft.tags
      })

    ###*
    # @ngdoc method
    # @name annotation.AnnotationController#save
@@ -299,7 +313,11 @@ AnnotationController = [
    this.render = ->
      # Extend the view model with a copy of the domain model.
      # Note that copy is used so that deep properties aren't shared.
      @annotation = angular.extend {}, angular.copy model
      @annotation = angular.extend {}, angular.copy(model)

      draft = drafts.get(model)
      if draft
        angular.extend @annotation, angular.copy(draft)

      # Set the URI
      @annotationURI = new URL("/a/#{@annotation.id}", this.baseURI).href
@@ -333,7 +351,7 @@ AnnotationController = [
        @document.title = @document.title[0..29] + '…'

      # Form the tags for ngTagsInput.
      @annotation.tags = ({text} for text in (model.tags or []))
      @annotation.tags = ({text} for text in (@annotation.tags or []))

    updateTimestamp = (repeat=false) =>
      @timestamp = time.toFuzzyString model.updated
@@ -348,11 +366,6 @@ AnnotationController = [
    # Export the baseURI for the share link
    this.baseURI = $document.prop('baseURI')

    # Discard the draft if the scope goes away.
    $scope.$on '$destroy', ->
      updateTimestamp = angular.noop
      drafts.remove model

    # watch for changes to the domain model and recreate the view model
    # when it changes
    # XXX: TODO: don't clobber the view when collaborating
@@ -369,7 +382,7 @@ AnnotationController = [
            $rootScope.$emit('annotationCreated', model)
          highlight = false # Prevents double highlight creation.
        else
          drafts.add model, => this.revert()
          updateDraft(model)

      updateTimestamp(model is old)  # repeat on first run
      this.render()
@@ -382,7 +395,22 @@ AnnotationController = [
      model.user ?= userid

    # Start editing brand new annotations immediately
    unless model.id? or (this.isHighlight() and highlight) then this.edit()
    isNewAnnotation = !(model.id || (this.isHighlight() && highlight));
    if isNewAnnotation || drafts.get(model)
      this.edit()

    # when the current group changes, if this an unsaved annotation then
    # move it to the current group
    $scope.$on events.GROUP_FOCUSED, ->
      if !vm.editing
        return

      draftDomainModel = {}
      updateDomainModel(draftDomainModel, vm.annotation)

      updateDraft(draftDomainModel)
      if !model.id
        model.group = groups.focused().id

    this
]

h/static/scripts/directive/group-list.js

@@ -32,9 +32,6 @@ function GroupListController($scope, $window, groups) {
  $scope.focusGroup = function (groupId) {
    groups.focus(groupId);
  }

  $scope.$on(events.GROUPS_CHANGED, $scope.$apply.bind($scope));
  $scope.$on(events.GROUP_FOCUSED, $scope.$apply.bind($scope));
}

/**

h/static/scripts/directive/test/group-list-test.js

@@ -165,20 +165,4 @@ describe('groupList', function () {
    clickLeaveIcon(element, true);
    assert.notCalled(fakeGroups.focus);
  });

  it('should update when a GROUPS_CHANGED event is received', function () {
    var element = createGroupList();
    var groupItems = element.find('.group-item');
    assert.equal(groupItems.length, groups.length + 1);

    groups.push({
      id: 'new-group',
      name: 'New Group',
      url: GROUP_LINK
    });
    $rootScope.$broadcast(events.GROUPS_CHANGED);
    element.scope.$digest();
    groupItems = element.find('.group-item');
    assert.equal(groupItems.length, groups.length + 1);
  });
});

h/static/scripts/threading.coffee

@@ -1,7 +1,20 @@
angular = require('angular')
mail = require('./vendor/jwz')


# The threading service provides the model for the currently loaded
# set of annotations, structured as a tree of annotations and replies.
#
# The service listens for events when annotations are loaded, unloaded,
# created or deleted and updates the tree model in response.
#
# The conversion of a flat list of incoming messages into a tree structure
# with replies nested under their parents
# uses an implementation of the `jwz` message threading algorithm
# (see https://www.jwz.org/doc/threading.html and the JS port
#  at https://github.com/maxogden/conversationThreading-js).
#
# The 'Threading' service "inherits" from 'mail.messageThread'
#
module.exports = class Threading
  root: null

@@ -61,6 +74,11 @@ module.exports = class Threading
    this.pruneEmpties(@root)
    @root

  # Returns a flat list of every annotation that is currently loaded
  # in the thread
  annotationList: ->
    (message for id, {message} of @idTable when message)

  pruneEmpties: (parent) ->
    for container in parent.children
      this.pruneEmpties(container)

h/static/scripts/widget-controller.coffee

@@ -1,13 +1,14 @@
angular = require('angular')

events = require('./events')

module.exports = class WidgetController
  this.$inject = [
    '$scope', 'annotationUI', 'crossframe', 'annotationMapper', 'groups',
    '$scope', 'annotationUI', 'crossframe', 'annotationMapper', 'drafts', 'groups',
    'streamer', 'streamFilter', 'store', 'threading'
  ]
  constructor:   (
     $scope,   annotationUI,   crossframe,   annotationMapper,   groups,
     $scope,   annotationUI,   crossframe,   annotationMapper,  drafts,    groups,
     streamer,   streamFilter,   store,   threading
  ) ->
    $scope.isStream = true
@@ -17,6 +18,12 @@ module.exports = class WidgetController
    @chunkSize = 200
    loaded = []

    _resetAnnotations = ->
      # Unload all the annotations
      annotationMapper.unloadAnnotations(threading.annotationList())
      # Reload all the drafts
      threading.thread(drafts.all())

    _loadAnnotationsFrom = (query, offset) =>
      queryCore =
        limit: @chunkSize
@@ -45,6 +52,11 @@ module.exports = class WidgetController
        streamFilter.resetFilter().addClause('/uri', 'one_of', loaded)
        streamer.send({filter: streamFilter.getFilter()})

    $scope.$on events.GROUP_FOCUSED, ->
      _resetAnnotations(annotationMapper, drafts, threading)
      loaded = []
      loadAnnotations crossframe.frames

    $scope.$watchCollection (-> crossframe.frames), loadAnnotations

    $scope.focus = (annotation) ->